logo标签列表

在视口元标记中设置最小宽度

javascripthtmlcssmeta-tags
3

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

目前，我将宽度固定为480像素，在手机上看起来非常完美，但在平板电脑上看起来很大。对于大屏幕，宽度应该动态改变。

你了解@media CSS吗？ - egig
在CSS中使用@media查询设置min-width:480px不会起作用吗？ - VKen
是的，可能需要写一个新的CSS来改变整个页面的字体等内容。 - user1617207
1
谁说响应式设计容易？ :) - Michaël Hompus
作为一名长期的设计师，我曾经不得不接手多个老客户的网站，并将它们的非响应式代码转换为响应式，这并不是一项容易的任务。但最终的成果是值得的。 - NodeDad
可能是使用viewport meta标签实现min-width的重复问题。 - Brendan Long
4个回答
4

我编写了一个polyfill，用于将min-width添加到视口meta标签中：

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上也应该可以正常工作。
1
在视口元标记中的min-width。
<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
}

媒体查询
视口

0

将您所有的桌面CSS按照通常的方式放置，就像您现在正在做的那样。然后使用媒体查询来调用您的新CSS元素。

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

同时在你的<head>标签中，将rel="stylesheet"和media="screen"添加到引用样式表的位置。

此外，这里有一个很棒的教程http://css-tricks.com/css-media-queries/。

那是唯一的方法吗？我不能修复宽度[min-width]吗？ - user1617207
你需要向我展示你的代码，以便修复你试图做的事情。我无法再帮助你了。 - NodeDad
-1

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

这个网站上有一个很棒的 @media 查询模板可供参考：

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

但通常情况下，首先要为您的桌面版本设置样式。然后在上面链接中定义的适当的@media查询下进行任何修改。我认为这是一个很好的起点！

1
研究表明，从小到大设计实际上更容易，可以减少后期修复错误的工作量。但这需要更高级的用户和逻辑思考者。必须要有预见性。因此，首先设计桌面并不是更好的选择，只是对于初学者来说更容易。 - NodeDad
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接