html - 请帮助澄清方向 :portrait behavior in CSS

Question

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

list-of-media-queries is a comma-separated list of media queries conditioning the application of the css rules defined in the linked url. If the browser doesn't support any of these media types, it won't even load the linked resource.

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

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

这是否意味着如果或何时我在台式电脑上调整网络浏览器的宽度，使宽度小于网络浏览器的高度，portrait.css 文件将覆盖当前风格？

或者如果视口(viewport)宽度已经小于它的高度，它是否仅在页面加载时加载 portrait.css 文件和？

Answer 1

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 */  
}  

所以每当宽度小于高度时，这将是一个肖像，最终将加载您的 css 文件，即使原始屏幕初始化为横向。