css - 我应该使用什么测量单位进行响应式设计？

Question

我是响应式设计的新手，正在尝试弄清楚如何在智能手机中布局网站的插件。这是一个例子:

@media (min-width: 568px) {
.musicPlayer{
    width:600px;
    height:320px;
}
.Box, .List{
    float:left;        
}
.Box, .List{
    width:50%;
    height:100%;
}
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
    .musicPlayer{
        width:600px;
        height:1200px;
    }
    .Box, .List{
        float:none;        
    }
    .Box, .List{
        width:100%;
        height:50%;
    }
}

如您所见，我将宽度或 .musicPlayer 设置为 600px。当我在 iPhone 上检查它时，它几乎是页面的一半。但是整个iPhone的宽度是320px，怎么600px是它的一半？!这就是为什么我认为也许在响应式设计中他们使用不同的单位，例如 em。任何想法？这是一个例子:http://goo.gl/Hje6XA

Answer 1

为了回答您的问题，响应式设计没有会导致这种情况的固有测量单位。你可以在你的 CSS 中使用任何你喜欢的东西，像素，ems，%，...

根据您的描述，我首先要检查的是您是否在页面头部包含了视口(viewport)标记。像下面这样的东西会让你开始。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果您忽略此设置，智能手机通常会缩放页面以使其适合，这不是您想要的响应式设计。

此外，尽管我认为这与您的问题无关，但使用 min-device-width 或 max-device-width 有时会使您的生活变得复杂，尤其是当您不熟悉 RWD 时。

您可能会发现使用 min-width 或 max-width 更容易。这里有一些关于差异及其与视网膜显示的关系的更多信息。 http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

希望这对您有所帮助!