我正在寻找关于
CSS3功能的一些问题的答案 – 媒体查询：
>对于不同的分辨率声明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有什么区别？它是否仅适用于移动(最大设备宽度)或桌面(最大宽度)浏览器的规则？
>如果我为分辨率为1280×800的平板电脑编写媒体查询规则,用户也可以使用纵向/横向模式,它应该如何显示？我应该为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是设备整个渲染区域的宽度
>
> max-width是目标显示区域的宽度
> max-device-width是设备整个渲染区域的宽度
/* 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 */
}
4.
要为宽度在320到480像素之间的移动设备定义样式表,您必须编写：
<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="mobile.css">
// 1缺少等号,< 6个字符限制. Mods,请删除它.谢谢
