Question

根据https://developer.mozilla.org/en-US/docs/Web/CSS/@import，

媒体查询列表是以逗号分隔的媒体查询列表调节链接中定义的css规则的应用网址。如果浏览器不支持任何这些媒体类型，则不会甚至加载链接的资源。

所以我想知道的是，如果我有：

@import url('portrait.css') screen and (orientation:portrait);

这是否意味着如果或当我调整桌面PC上Web浏览器的宽度，使宽度小于Web浏览器的高度时，portrait.css文件将覆盖目前的风格？

或者，如果视口宽度已小于其高度，它是否仅在页面加载和上加载portrait.css文件？

Answer 1

这只会使您导入的css文件在某些条件下工作。这也是我最喜欢的功能之一。例如，您有这段代码：

body {
    color:green;
}

使用条件媒体查询导入时，例如orientation:portrait，您的样式将被“修改”，这样如果方向是肖像，颜色将变为绿色。

引自csswg's documentation媒体查询：

当“高度”媒体要素的值大于或等于“宽度”媒体要素的值时，“方向”媒体要素为“纵向”。否则'方向'就是'风景'。

一个简单的例子就是你使用移动浏览器。由于方向通常是肖像。在桌面上，如果您调整窗口大小，从而更改方向，这将生效。

this page

中有一个很好的例子

Answer 2

http://www.hongkiat.com/blog/css-orientation-styles/

@media all and (orientation:portrait) {  
    /* Styles for Portrait screen */  
}  
@media all and (orientation:landscape) {  
    /* Styles for Landscape screen */  
}

所以每当宽度小于高度时，这应该是一个portrai，最终将加载你的css文件，即使原始屏幕在横向上初始化。

请帮助澄清方向：CSS中的肖像行为

2 个答案: