1、现在来实现当屏幕宽度小于或等于600像素时，才会应用css.css样式文件，如图效果。media='screen and (max-width: 600px)'。2、在media属性中，'screen'代表媒体的类型为电脑或移动终端显示屏幕（手机），除此之外，媒体查询还有all、print、tv媒体类型，分别代表所有媒体、印刷媒体、电视媒体。3、'and'是一个表示'与'关系的关键字，它类似于JavaScript表达式中的&&运算符，除此之外，媒体查询还有not和only关键字，分别代表排除某种设备，以及仅限于某种设备。4、'(max-width: 600px)'为媒体特性，需要放置在一对圆括号中，它代表媒体的最大宽度为600像素。
上述提到说screen也适用于移动端，来测试下是不是这么回事？如图，F12进入测试模式，发现像素小于600像素时并没有应用css.css文件，请看下一步。
这是因为移动端始终把980像素当默认视口，就算测试窗口小于也没用。如图操作，设置meta标记，让宽度等于设备宽度，这样测试窗口正确了。
如图操作，实现当屏幕宽度大于或等于500像素时，应用css.css文件。media='screen and (min-width: 500px)'
如图操作，实现当，500<=屏幕宽度<=600，应用css.css文件。media='screen and (min-width: 500px) and (max-width:600px)'
当screen表示桌面端和移动端时，如何只让css文件只应用于移动端？如图操作，只要加上-device即可，这样就不会应用于桌面端，只应用于移动端。
使用all属性时，表示应用所有媒体设备，如包括印刷媒体，电视媒体等。
按住Ctrl键+鼠标滚动滑轮可以放大网页更清楚查看gif动态图。
因gif动态图将重复播放。建议进入-步骤阅读模式-边看文字边单击图片放大看。