媒体查询支持比较符号

请选择此段代码解释正确的选项:

@media screen and (max-width：768px) and (min-width:1200px)

A. 1200px >= 浏览器宽度 >=768px
B. 1200px >浏览器宽度 >768px
C. 浏览器宽度 >=1200px 或 浏览器宽度<=768px
D. 浏览器宽度 >1200px 或 浏览器宽度<768px
正确答案:
浏览器宽度 >=1200px 且 浏览器宽度<=768px ABCD都是错误答案
换句话说, 这段媒体查询css永远不会被触发. 有没有似曾相识感? 不用担心, 因为不止你一个人如此困惑, 所以css推出了新的语法

Media query range syntax

当你想在 576px, 768px, 1200px下分别设置不同的css, 在以前你只能这么做

@media screen and (max-width: 576px) {}
@media screen and (min-width: 576.01px) and (max-width:768px) {}
@media screen and (min-width: 768.01px) and (max-width:1200px) {}
@media screen and (min-width: 1200.01px) {}

现在 你可以这样👇

@media screen and (width < 576px) {}
@media screen and (width >= 576px) and (width <= 768px) {}
@media screen and (width > 768px) and (width < 1199px) {}
@media screen and (width >= 1200px) {}

简单多了,对吧? 而且一眼就知道这些媒体查询在做什么

浏览器支持