Question

我正在设计一个网页[响应]。屏幕的最小宽度应为480px。我该怎么做？

现在我正在将宽度固定为480px，这在手机上看起来很完美但在平板电脑上看起来相当大。对于大屏幕，宽度应该动态变化。

Answer 1

视图端口元标记中的最小宽度

<meta name="viewport" content="width=480">

或

@-o-viewport {
  width: 480px;
}

用于响应式设计

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

使用媒体查询

@media screen and (max-width: 480px) {
    css
}

Media queries
view port

Answer 2

我写了一个polyfill来将min-width添加到viewport元标记：

https://github.com/brendanlong/viewport-min-width-polyfill

如果您使用它，您可以这样做：

<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=480"/>
<script type="text/javascript" src="viewport-min-width.js"></script>

如果screen.width < minWidth，则使用静态宽度替换视口。我已经在移动版Firefox和Chrome中进行了测试，它应该可以在Safari中使用我所听到的内容。

Answer 3

像往常一样放置所有桌面CSS，我想，就像你现在一样。然后使用媒体查询来调用新的css元素。

@media screen and (max-width: 480px) {
    //all of your mobile styling
}

还将media="screen"添加到<head> rel="stylesheet"

中调用样式表的位置

还有一个很棒的教程http://css-tricks.com/css-media-queries/

Answer 4

@media查询绝对是您需要的。它们允许您根据查看站点的视口大小执行不同的CSS。

此网站有一个很棒的@media查询模板可以解决：

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

但一般来说，首先要设置您的桌面版本样式。然后在上面链接中定义的相应@media查询下进行任何修改。我认为这是一个开始的好地方！

在viewport metatag中设置min-width

4 个答案: