我正在设计一个网页 [响应式]。屏幕的最小宽度应为 480 像素。我该怎么做？
现在我将宽度固定为 480 像素，这在手机上看起来很完美，但在平板电脑上看起来却很大。对于大屏幕，宽度应该动态变化。
【问题讨论】：
min-width:480px in CSS using @media 查询有效吗？
标签： javascript html css meta-tags
我写了一个 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>
如果screen.width < minWidth，它通过用静态宽度替换视口来工作。我已经在移动 Firefox 和 Chrome 中进行了测试，据我所知，它应该可以在 Safari 中运行。
【讨论】：
视口元标记中的最小宽度
<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
}
【讨论】：
我想，就像现在一样，像往常一样放置所有桌面 CSS。然后使用媒体查询来调用你的新 CSS 元素。
@media screen and (max-width: 480px) {
//all of your mobile styling
}
还将media="screen" 添加到您在<head> rel="stylesheet" 中调用样式表的位置
【讨论】：
@media 查询绝对是您需要的。它们允许您根据查看站点的视口大小执行不同的 CSS。
这里有一个很棒的@media 查询模板可供使用：
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
但通常，首先要为您的桌面版本设置样式。然后在上面链接中定义的相应@media 查询下进行任何修改。我认为这是一个很好的起点！
【讨论】：