媒体查询为将适合所有

Question

我创建一个移动应用，屏幕的移动设备正在使用媒体查询：

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

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

但分辨率不恰当的小屏幕设备。

通常对于响应式用户界面，您应该为维度范围设置样式。对于例如任何屏幕分辨率低于320x480或类似的设备。

是否有任何媒体查询支持移动设备的所有屏幕分辨率？

Answer 1

我不认为这是屏幕分辨率的问题，更多与媒体查询支持有关。尝试这样的测试：

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

如果这不影响浏览器，它doesn't support media queries。你可以得到的JavaScript替代，以支持像Respond.JS

Answer 2

完全教程这里的旧设备： 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; 
} 

}