Question

我正在尝试创建一个简单的CSS响应式布局，在我的计算机中，一切似乎都很好。但是当我通过手机（诺基亚710）访问时，元素会比正常情况更大。

这就是我所拥有的：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

html, body, ul, li { margin: 0; padding: 0; }
body, input, select { font-family: Arial; font-size: 0.800em; }
li { float: left; display: inline; margin: 1px; background-color: #d9d9d9; text-align: center; overflow: hidden; }

li { width: 5vw; height: 5vw; background-color: #aaa; }

@media only screen and (max-width : 320px) {
  li { width: 0.5vw; height: 0.5vw; background-color: red; }
}

使用此代码，在我的手机中，布局工作正常。但是在Chrome设备上调试元素太小了。

这应该是一个简单的布局，而不是我做错了。

这是我的代码：http://codepen.io/rochapablo/full/EaJxZP/

浏览器： Mozilla / 5.0（兼容; MSIE 9.0; Windows Phone OS 7.5; Trident / 5.0; IEMobile / 9.0;诺基亚; Lumia 710）

更新

我不明白为什么使用vw设备的宽度是不同的。所以我尝试了％并且工作了。我并不是百分之百满意，但这已经在所有使用相同代码的设备上工作。

li { width: calc(100% / 4 - 2px); height: 50px; line-height: 50px; }
li:nth-child(1) { width: calc(100% / 4 - 2px); height: 102px; line-height: normal; text-align: left; }
li:nth-child(4) { width: calc(100% / 4 - 2px); height: 50px; }
li:nth-child(5) { width: calc(100% / 2 - 2px); height: 50px; }

Answer 1

您的宽度和高度值使用的视口宽度（vw）和高度（vh）值没有设置最小值。

这将导致元素相对于视口大小变得无限小。

我建议为li元素添加min-width和min-height值。

e.g。

@media only screen and (max-width : 320px) {
  li { 
    width: 0.5vw; 
    height: 0.5vw; 
    min-width:200px; /** ADDED **/
    min-height:200px; /** ADDED **/ 
    background-color: red; 
  }
}

混淆视口配置

1 个答案: