我正在寻找有关 CSS3 功能的一些问题的答案 - Media Queries
:
哪种方式更好(对于浏览器,由于性能)声明不同分辨率的 css 规则?
//this in head: <link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" /> //or this in css file: @media only screen and (max-width: 1024px){ //styles here }
max-device-width
和max-width
有什么区别?它是否仅适用于移动(max-device-width
)或桌面(max-width
)浏览器的规则?如果我为分辨率为
1280x800
的平板电脑编写媒体查询规则,用户也可以使用纵向/横向模式,它看起来应该如何?我应该为max-width: 800px
和max-width: 1280px
编写规则还是有其他方法?如果我写规则,我应该这样写:
<link ... media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)... />
或者这两个:
<link ... media="only screen and (max-device-width: 480px) ... /> <link ... media="only screen and (max-device-width: 1024px) ... />
附言请原谅任何拼写或语法错误,英语不是我的母语
P.S.S.在我发布这个问题之前,我花了一段时间在 stackoverflow 上搜索并没有找到关于这个问题的信息。如果我错了,还有类似的问题,我会删除我的帖子。
最佳答案
css 文件中的规则可减少请求数量(提高性能)。
max-width
为目标显示区域的宽度max-device-width
为设备整个渲染区域的宽度
我知道的另一种定位纵向或横向的方法是像这样添加 orientation
:
/* portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
/* styles here */
}
/* landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
/* styles here */
}
要为宽度在 320 到 480 像素之间的移动设备定义样式表,您必须编写:
<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="mobile.css">
关于css - CSS3 中媒体查询的最佳实践是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14947672/