适用于所有屏幕的移动设备媒体查询

Question

我正在开发一个移动应用，使用了媒体查询：

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

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

但是分辨率不适合较小的屏幕设备。

通常来说，对于响应式UI，您应该为一定范围内的尺寸进行样式设计。例如，任何屏幕分辨率低于320x480或类似尺寸的设备。

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

- ishqjan se

---

请尝试使用max-device-width而不是max-width。 - darryn.ten

Answer 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;
}

}

- Muhammad Talha Akbar

---

Modernizer是教程中使用的插件！ - Muhammad Talha Akbar

Answer 2

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

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

如果这不会影响浏览器，那就意味着它不支持媒体查询。您可以获取一些JavaScript替代方案来支持旧设备，例如Respond.JS

- Andy

---

那就意味着你的手机不支持媒体查询。加入<script src="https://raw.github.com/scottjehl/Respond/master/respond.min.js"></script>，它应该可以工作了。 - Andy

这只是为了测试目的，你不应该依赖于Github来托管你所依赖的代码，下载本地副本并引用它。 - Andy