4

私はこれに1週間苦労しています。たくさんの投稿/ウェブ/ヒントとコツを読みましたが、これを理解することはできません.

さまざまな画面サイズと向きに合わせて CSS ルールを設定する必要があります。しかし、それが機能していないという認識。

私は試してみました：min-width、max-width、min-height、max-height、min-device-width、max-device-width、min-device-height、max-device-height、向き：縦、向き: 横向き、メディア="画面のみおよび (最大..."、メディア="画面および (最大..."、メディア="(最大.."))、あらゆる種類の組み合わせ、これはすべての場合には機能しません解像度と向き。

これは例です：

<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)"/>

どうすればこの問題に対処できますか? ありがとう

dhcメガ

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 に答える