Question

当我使用Google Chrome检查员模拟选择Galaxy S5（360px）时，我在检测正确的屏幕宽度时遇到问题。它省略了360px的CSS并使用了768px CSS。有更好的解决方法吗？

@media only screen and (max-device-width: 360px)  
{

    .header_2{width:100%;height:auto;padding:20px;}
    .left_obj{width:290px; position:relative;float:left;margin-bottom:20px;}
    .right_obj{width:290px; position:relative;float:left;}
    .mini_header{margin-bottom:20px;}

}


@media only screen and (max-device-width: 768px)  
{

    .header_2{width:100%;height:auto;padding:20px;}
    .left_obj{width:370px; position:relative;float:left;margin-bottom:20px;}
    .right_obj{width:370px; position:relative;float:left;}
    .mini_header{margin-bottom:20px;}

}

Answer 1

只需更改媒体查询的顺序或反转即可。首先写入768媒体查询，然后写入360.

Answer 2

您可以在标题中添加元数据。

<meta name="viewport" content="width=device-width">

您也可以参考此链接了解完整详情 http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

检测所有移动设备的屏幕宽度

2 个答案: