4

我已经为此苦苦挣扎了一个星期。我已经阅读了大量的帖子/网站/提示和技巧，但我就是想不通。

我需要为不同的屏幕尺寸和方向设置 CSS 规则。但是识别它不起作用。

我尝试过：最小宽度，最大宽度，最小高度，最大高度，最小设备宽度，最大设备宽度，最小设备高度，最大设备高度，方向：纵向，方向: Landscape, media="only screen and (max...", media="screen and (max...", media="(max.."), all kind of convinations,这些都不适用于所有决议和方向。

这是和示例：

<link rel="stylesheet" href="css/iscroll.css" />
<link rel="stylesheet" href="css/iscroll_600.css"  type="text/css" media="only screen and (max-width: 600px) and (max-height: 1024px) and (orientation: portrait)"/>    
<link rel="stylesheet" href="css/iscroll_600.css"  type="text/css" media="only screen and (max-width: 1024px) and (max-height: 600px) and (orientation: landscape)"/> 
<link rel="stylesheet" href="css/iscroll_1280.css" type="text/css" media="only screen and (max-width: 800px) and (max-height: 1280px) and (orientation: portrait)"/>
<link rel="stylesheet" href="css/iscroll_1280.css" type="text/css" media="only screen and (max-width: 1280px) and (max-height: 800px) and (orientation: landscape)"/>

我该如何解决这个问题？谢谢

dhcmega

4

2 回答 2

4

看起来它是这样工作的

<link rel="stylesheet" href="css/style_default.css" />
<link rel="stylesheet" href="css/style320.css" media="(min-width: 241px) and (max-width: 320px) and (orientation: portrait)"/>
<link rel="stylesheet" href="css/style480.css" media="(min-width: 321px) and (max-width: 480px) and (orientation: portrait)"/>  
<link rel="stylesheet" href="css/style540.css" media="(min-width: 481px) and (max-width: 540px) and (orientation: portrait)"/>
<link rel="stylesheet" href="css/style600.css" media="(min-width: 541px) and (max-width: 600px) and (orientation: portrait)"/>  
<link rel="stylesheet" href="css/style1280.css" media="(min-width: 601px) and (max-width: 800px) and (orientation: portrait)"/>
<link rel="stylesheet" href="css/style1536.css" media="(min-width: 801px) and (max-width: 1152px) and (orientation: portrait)"/>
<link rel="stylesheet" href="css/style320.css" media="(min-width: 321px) and (max-width: 480px) and (orientation: landscape)"/>
<link rel="stylesheet" href="css/style480.css" media="(min-width: 481px) and (max-width: 800px) and (orientation: landscape)"/>  
<link rel="stylesheet" href="css/style540.css" media="(min-width: 801px) and (max-width: 960px) and (orientation: landscape)"/>    
<link rel="stylesheet" href="css/style600.css" media="(min-width: 961px) and (max-width: 1024px) and (orientation: landscape)"/> 
<link rel="stylesheet" href="css/style1280.css" media="(min-width: 1025px) and (max-width: 1280px) and (orientation: landscape)"/>    
<link rel="stylesheet" href="css/style1536.css" media="(min-width: 1281px) and (max-width: 1536px) and (orientation: landscape)"/>

这就像创建完全不重叠的不同分辨率集

于 2012-05-08T13:50:17.770 回答
2

您是否尝试过使用 javascript 来查看媒体查询返回的内容，以检查结果？

var mq = window.matchMedia( "only screen and (max-width: 600px) and (max-height: 1024px) and (orientation: portrait)" );  

if (mq.matches) {
    // window width is exactly 600x1024 and portrait
}
else {
    // window width is exactly 600x1024 and portrait
}

链接供参考。

于 2012-05-07T16:36:34.203 回答