海安网站开发公司依靠css 媒体查看来依据目标条件选择和设定元素样式.这种情况可能是各种各样的,但通常可以分为两个阵营：(1) 正在使用的媒体种类,以及 (2) 浏览器、设备甚至客户环境的特定功能.

　　因此,假设大家想将某些 css 样式运用于打印文件：

　　大家可以在特定视口宽度上运用样式这一事实使 css 媒体查看成为海安网站开发公司反应式网页制作的核心要素.如果浏览器的视口宽度是某个大小,那么运用一组样式规则,它允许大家制作反应浏览器大小的元素.

　　注意到里面了and吗?这是一个允许大家组合语句的运算符.在该示例中,大家整合了媒体种类为 ascreen且其min-width功能设定为30em(或更高)的条件.大家可以做同样的事情来定位一系列视口大小：

　　现在这些样式适用于一个明确的视口宽度范围内,而不是单个宽度!

　　<但是 media queries level 4 规范引进了一种新语法,用于使用常见的数学比较运算符(例如、>和)来定位一系列视口宽度,=这在语法上更有意义,同时编写的代码更少.

　　让大家深进研究它是如何工作的.

　　新的比较运算符

　　最后一个例子很好地说明了大家如何根据使用and运算符组合条件来“伪造”范围内.media queries level 4 规范的重大变化是大家有新的运算符来比较值而不是组合它们：

　　<评估一个值是否低于另一个值

　　>评估一个值是否大于另一个值

　　=评估一个值是否等于另一个值

　　<=评估一个值是否低于或等于另一个值

　　>=评估一个值是否大于或等于另一个值

　　600px如果浏览器宽或更大,大家可能会编写一个运用样式的媒体查看：

　　以下是使用比较运算符编写相同内容的外观：

　　定位一系列视口宽度

　　通常,当大家编写 css 媒体查看时,大家会创建所谓的断点——制作“中断”并运用一组样式来修复它的条件.一个制作可以有一堆断点!它们通常基于两个宽度之间的视口：断点开始的位置和断点的结束位置.

　　以下是大家使用and运算符组合两个断点值的方法：

　　and当大家放弃布尔运算符以兼容新的范围内比较语法时,您开始很好地了解编写媒体查看是多么的短和非常容易：

　　非常容易多了,对吧?而且很清楚这个媒体查看在做什么.

　　浏览器兼容

　　在撰写本文时,海安网站开发公司这种改进的媒体查看语法仍处于早期阶段,目前还没有像整合min-width和max-width.不过,大家越来越近了!