[分享]css3多条媒体查询

CSS3媒体查询（Media Query）是一种能够让 Web 开发人员为不同的屏幕大小和设备分组的技术。多条媒体查询（Multiple Media Queries）是进一步使用媒体查询进行响应式设计...

CSS3媒体查询（Media Query）是一种能够让 Web 开发人员为不同的屏幕大小和设备分组的技术。多条媒体查询（Multiple Media Queries）是进一步使用媒体查询进行响应式设计的方法。使用多条媒体查询，可以设置不同的 CSS 样式，以适应不同的设备、分辨率和屏幕大小。

@media only screen and (min-width: 768px) and (max-width: 1024px){
   /* 样式 */ 
}

@media only screen and (min-width: 480px) and (max-width: 767px){
   /* 样式 */ 
}

@media only screen and (max-width: 479px){
   /* 样式 */ 
} 

在上述代码中，@media 表示开始创建一个媒体查询；only screen 表示仅适用于计算机屏幕；min-width 和 max-width 分别设置最小宽度和最大宽度；根据不同的屏幕大小，应用不同的样式。第一个媒体查询适用于宽度在 768px 和 1024px 之间的设备；第二个媒体查询适用于宽度在 480px 和 767px 之间的设备；第三个媒体查询适用于宽度小于 479px 的设备。

使用多条媒体查询可以让网页在不同大小的设备上灵活展现，并优化用户体验。在设计响应式网站时，我们应该充分利用多条媒体查询的能力，以适应越来越多的设备和分辨率。