css3 media only

在前端开发中，许多开发者都习惯使用CSS媒体查询来针对不同终端设备设置不同的样式。CSS3提供了更加高效、灵活的方式——使用@media only。下面我们来看看这个新特性的用法和优势。

@media only screen and (max-width: 768px) {
  /* 在屏幕宽度小于等于768px时应用的样式 */  body {
        font-size: 16px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1200px) {
  /* 在屏幕宽度为769~1200px之间应用的样式 */  body {
        font-size: 18px;
  }
}
@media only screen and (min-width: 1201px) {
  /* 在屏幕宽度大于1201px时应用的样式 */  body {
        font-size: 20px;
  }
}
    

上述代码中，我们使用@media only来定义了三个媒体查询。其中，“only”表示只有在指定的媒体类型下才生效。在本例中，我们指定了屏幕类型为“screen”。接着，使用“and”连接多个条件判断，例如屏幕宽度大于等于某个值，小于某个值等。最后，在每个媒体查询中指定了具体的样式。

使用@media only的优势在于，它可以自动屏蔽掉不识别这个关键字的老旧浏览器。在过去，一些浏览器可能无法正确解析“only”关键字，导致媒体查询不生效。而现在，大多数浏览器都能够正确解析这个关键字并仅应用到指定的媒体类型上，因此我们可以更加安心地使用这个新特性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！