CSS3新增的选择器

发布网友发布时间：2022-05-06 11:44

我来回答

共3个回答

热心网友时间：2022-05-12 15:15

@media (min-width: 992px)

允许浏览器可视范围最小大小为 992px，当浏览器可视范围的大小 ≥ 992px 时， .container 的最大宽度为 970px，

即，无论浏览器放到多大，只要它不少于 992px ，.container 的宽度始终为 970px。

当浏览器可视范围小于 992px 时，.container 中的设置无效。

这里.container 中，应该还有设置一个默认的值。

再举例：

@media(max-width:1000px){
      .container{
                max-width:970px;
        }

}

同理，这里的 @media{max-width:1000px} 就是允许浏览器最大宽度为 1000px，时它小于 1000px 时，.container 中的值才会生效，反即失效。

也就是说：

@media{} 中的值，是允许条件，当这条件成立时，它中的内容才会生效。

详细翻译即为：

如果浏览器的宽度小于或等于 1000px 时（注：理解好最大宽度为啥意思，最小宽度即为大于或等于这个值），.container 中的最大宽度为 970px，无论浏览器被缩到多少，.container 的宽度始终为 970px，但是当大于 1000px 时，.container 中的值就为无效。

@media 中也可以写个固定宽度值，如：

@media(wdith:1000px){
      .container{
          width:970px
      }
}

浏览器宽度等于 1000px 时，.container 宽度即为 970px ，显然，这绝对等于的值，设置起来无意义的。

以上~

自测得出的结果……

热心网友时间：2022-05-12 16:33

这叫css媒体查询，不是css选择器。

你这段代码意思是：
当屏幕最小宽度为992px时，class为.container的元素最大宽度970px；也就是当遇到大于992px宽的屏幕尺寸时，设置.container的最大宽度970px。

比如你可以再加一条：
@media (max-width: 320px) {
.container {
max-width: 300px;
}

那么只要屏幕宽度小于320px，.container的宽度就是240px;
这样你就可以用同一套html，通过css媒体查询来区别各种屏幕尺寸的设备，为手机、电脑、pad制作不同的界面布局。

热心网友时间：2022-05-12 18:07

响应式布局的意思，具体可以百度一下子