css媒体查询总结 |css3 transform 转换

/* 用于小于等于768像素宽的设备 */
@media (max-width: 768px) {
/* CSS 规则在此 */
}
/* 用于小于等于992像素宽的设备 */
@media (max-width: 992px) {
/* CSS 规则在此 */
}
/* 用于小于等于1200像素宽的设备 */
@media (max-width: 1200px) {
/* CSS 规则在此 */
}

这些媒体查询仅列出了一些常见的宽度值。你可以根据需要适应不同的屏幕大小和设备类型。除了max-width，你还可以使用min-width、orientation和device-aspect-ratio等属性。例如：

/* 用于最小宽度为 768 像素的设备 */
@media (min-width: 768px) {
/* CSS 规则在此 */
}
/* 用于横向屏幕设备 */
@media (orientation: landscape) {
/* CSS 规则在此 */
}
/* 用于设备长宽比为 16:9 */
@media (device-aspect-ratio: 16/9) {
/* CSS 规则在此 */
}

通过使用媒体查询，大家可以轻松地为不同的屏幕大小和设备类型提供定制的用户体验。无论你是在设计单页应用还是响应式电子商务网站，掌握如何运用媒体查询是非常重要的。