在样式。css中，我使用媒体查询，这两者都使用的变体:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
当我缩小窗口时，网站大小会调整到我在常规浏览器(Safari, Firefox)中想要的布局，然而，手机上根本不会显示移动布局。相反，我只看到默认的CSS。
有人能告诉我正确的方向吗?
当前回答
这三个技巧都很有用，但我似乎需要添加一个元标签:
<meta content="width=device-width, initial-scale=1" name="viewport" />
现在它似乎在Android(2.2)和iPhone上都能运行…
其他回答
@media all and (max-width:320px)and(min-width:0px) {
#container {
width: 100%;
}
sty {
height: 50%;
width: 100%;
text-align: center;
margin: 0;
}
}
.username {
margin-bottom: 20px;
margin-top: 10px;
}
@media屏幕必须位于css的末尾，这一点很重要
这三个技巧都很有用，但我似乎需要添加一个元标签:
<meta content="width=device-width, initial-scale=1" name="viewport" />
现在它似乎在Android(2.2)和iPhone上都能运行…
css代码的顺序也很重要，例如:
@media(max-width:600px){
.example-text{
color:red;
}
}
.example-text{
color:blue;
}
由于执行顺序的原因，上述代码将无法工作。需要写如下:
.example-text{
color:blue;
}
@media(max-width:600px){
.example-text{
color:red;
}
}
嗯，在我的例子中，width值后面的px缺失了……有趣的是，W3C验证器甚至没有注意到这个错误，只是默默地忽略了这个定义。
