4

私はモバイルアプリを作成しており、メディアクエリを使用しています:

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Your Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Your Styles */
}

ただし、解像度が小さい画面のデバイスには適合しません。

一般に、レスポンシブ UI では、ディメンション範囲のスタイルを設定する必要があります。たとえば、画面解像度が 320x480 未満のデバイスなど。

モバイル デバイスのすべての画面解像度をサポートするメディア クエリはありますか?

4

2 に答える 2

1

完全なチュートリアルはこちら: http://www.9lessons.info/2012/12/responsive-web-design-css3.html

*{margin:0px;padding:0px}
#header
{
padding:20px;
overflow:auto;
}
#main
{
padding:10px;
}
#footer
{
padding:20px;
clear:both
}
#article,#sidebar
{
min-height:250px;margin-bottom:20px;overflow:auto
}

ul
{
list-style:none;
width:100%
}
li
{
padding:4px;
margin-bottom:5px;
background-color:#ffffcc;
text-align:center;
color:#00000
}

@media only screen and (min-width: 480px){

ul
{
float:left;
}
li
{
float:left;
width:16%;
padding:4px;
margin-right:8px
}

}

@media only screen and (min-width: 768px){

#article
{
float:left;
width:68%;
}
#sidebar
{
float:right;
width:30%;
}
#logo
{
float:left;
width:10%;
}
#nav
{
float:right;
width:80%;
}

}

@media only screen and (min-width: 1140px) {

#main
{
padding:20px 40px 20px 40px;
}

}
于 2012-12-14T09:30:17.560 に答える
0

これは画面解像度の問題ではなく、メディアクエリのサポートに関係していると思います。次のようなテストを試してください。

@media only screen
and (min-width : 1px) {
   body {
    background: red;
   }
}

それがブラウザーに影響しない場合、メディア クエリはサポートされていません。Respond.JSなどの古いデバイスをサポートするための JavaScript の代替品を入手できます。

于 2012-12-14T09:24:07.853 に答える