CSS 中 @media(min-width/max-width) 是否受显示器缩放的影响?

作者:vkvi 来源:千一网络(原创) 日期:2020-6-19

在 CSS 中,可以使用 @media 让 CSS 在指定的环境下生效。

@media print {
    .data { display:none; } /*打印时,.data 的 display 为 none*/
}

@media (min-width:1920px) {
    .extra { display:block; } /*不论是什么输出媒体,宽度在 1920 及以上时,extra 的 display 为 block*/
}

@media screen and (max-width:1920px) {
    .extra { display:none; } /*显示器上,宽度在 1920 及以下时,extra 的 display 为 none*/
}

以上为基本语法,要注意:

  • 属性要求写法类似 CSS,但是不能以分号结尾。

  • 属性要求要用括号括起来。

  • 属性要求与媒体类型之间,使用 and

关于这个属性要求,min-width、max-width,其实并不是指屏幕宽度,而是指呈现这个页面的窗口宽度

也就是说:虽然屏幕有 1920px,但我们浏览器没有全屏,浏览器宽度拉到 1000px,那么也是按 1000px 来参与计算的。

下面谈谈当屏幕有缩放时,min-width、max-width 要求是怎样的。

@media (min-width:1281px) {
    .img img { width:60%; }
}

假如我们显示器是 1920px 的宽度,进行了 150% 的放大,浏览器全屏,那么就是 1920px / 1.5 = 1280px 参与计算,上述 CSS 代码要求最少 1281px,所以上述 CSS 不生效。

继续

假如我们接了两个显示器,两个显示器为扩展关系,都是 1920px 的宽度,但是显示器 1 进行了 150% 的放大,当网页在两个显示器之间拖动时,CSS 是否会实时地根据当前显示器进行重新计算?会进行重新计算!这跟缩放浏览器窗口,CSS 也会实时地重新计算是一个道理。

显示器缩放

相关文章