2

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

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

4

4 回答 4

3

我写了一个 polyfill 来添加min-width到视口元标记中：

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>

它通过将视口替换为静态宽度 if 来工作screen.width < minWidth。我已经在移动 Firefox 和 Chrome 中进行了测试，据我所知，它应该可以在 Safari 中运行。

于 2016-12-06T20:47:44.777 回答
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
}

媒体查询
视口

于 2013-03-25T07:09:24.257 回答
0

我想，就像你现在一样，像往常一样放置你所有的桌面 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/

于 2013-03-25T07:05:31.927 回答
-1

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

这个网站有一个很好的@media查询模板可以工作：

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

但一般来说，首先设计您的桌面版本。@media然后在上面链接中定义的相应查询下进行任何修改。我认为这是一个很好的起点！

于 2013-03-25T07:10:18.230 回答