我正在创建一个移动应用，正在使用媒体查询：
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Your Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Your Styles */
}
但分辨率不适合小屏幕设备。
一般来说，对于响应式 UI，您应该为尺寸范围设置样式。例如任何屏幕分辨率低于 320x480 或类似的设备。
是否有支持移动设备所有屏幕分辨率的媒体查询？
【问题讨论】：
完整教程在这里： 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;
}
}
【讨论】：
我认为这不是屏幕分辨率的问题，更多的是与媒体查询支持有关。试试这样的测试：
@media only screen
and (min-width : 1px) {
body {
background: red;
}
}
如果这不影响浏览器，它doesn't support media queries。您可以获取 javascript 替换以支持旧设备，例如 Respond.JS
【讨论】：
<script src="https://raw.github.com/scottjehl/Respond/master/respond.min.js"></script>，它应该可以工作