Question

我正在开发一个移动网站，当屏幕宽度范围从150px到480px时，我使用CSS来改变布局设计。但是，当我测试实际的手机时，我看到的是桌面的屏幕布局，而不是我用过CSS的布局。

根据this，我应该得到屏幕宽度，但我不知道如何访问它并在屏幕宽度范围仅为150px - 480px时放置布局声明。

@media only screen and (min-width: 150px) and (max-width: 480px) {
#header .navbar ul li a {
    font-size:15px;     
}

#content .apk {
    padding-bottom:5px;
    border-bottom:1px solid #ccc;       
}

#content .apk img{
    float:left;
    margin:0 10px 0 0;
    width:100px;
    height:100px;
}

#content .apk p {
    margin-top:-20px;
    font-size:13px;
    color:#444;
}

#content .apk .submit {
    margin-top:-10px;
    margin-left:100px;
    resize:horizontal;
    width:32%;

}

#footer h5 {
    font-size: 14px;
}

}

Answer 1

您可以使用CSS媒体查询来执行此操作：

@media all and (min-width: 150px) and (max-width: 480px) {
    /* insert specific CSS here */
}

参见这些文章：

检查移动网站的小分辨率

1 个答案: