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，％，......中使用您喜欢的任何内容。

根据您的描述，我要检查的第一件事是您在页面的头部包含了一个视口标记。像下面这样的东西会让你开始。

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

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

此外，虽然我不认为它与您的问题有关，但使用min-device-width或max-device-width有时会使您的生活变得复杂，特别是如果您不熟悉RWD。

您可能会发现使用最小宽度或最大宽度更容易。这里有关于差异以及它与视网膜显示有何关系的更多信息。 http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

希望这有帮助！

Answer 2

您需要添加到<head>代码

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

您应该使用%的流畅网格作为宽度，相对字体大小，例如em或rem。但是如果你是响应式设计的新手，也许最好检查一些像Foundation或Bootstrap这样的框架并尝试使用它。

这是开始设计的好地方：http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

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

2 个答案: