通过meta标签进行响应式网页设计

Question

我想知道除使用此meta标签外，有什么方法可以进行响应式网页设计：

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

Answer 1

下面的meta标签只会将初始比例重置为1，将宽度重置为设备宽度

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

不过，您可以使用media query进行自适应网页设计

喜欢前

@media only screen and (min-width: 769px) and (max-width: 1281px) { 
    h1{
        color: red;
    }
}

Answer 2

看看this，引导程序具有自己的媒体查询也可以响应。

Answer 3

不。 HTML需要此元标记才能将页面创建为响应页面。 CSS中没有其他方法。 但是，您可以通过JS创建响应页面。您必须为不同的分辨率编写不同的CSS代码，并且在页面加载时可以计算页面的宽度，并加载该特定分辨率所需的特定CSS文件。

尽管这不是响应页面的理想方法。

谢谢！

Answer 4

视口meta是将常规网站转变为响应式Web设计的元素。没有视口元标记，即使在移动设备中，页面也显示为典型的桌面屏幕。因此，如果您希望网站在所有设备中都能响应，则必须使用标签。

Answer 5

<meta name="viewport" content="width=device-width">标签（最初为Apple专有）实际上使布局视口完全适合设备。

现在是什么布局视口？这是浏览器用来计算具有百分比宽度的元素（例如div.sidebar {width：20％}）的尺寸的区域（以CSS像素为单位）。 。通常比设备屏幕大很多：iPhone上为980px，Opera上为850px，Android上为800px，等等。

如果添加<meta name="viewport" width="device-width">，则此布局视口的宽度被限制为以设备像素为单位的设备宽度；在iPhone的情况下，其中有320个。

这很重要，如果您的页面足够窄以适合屏幕。在没有任何CSS width语句且没有<meta>标签的情况下访问此页面。它会延伸到布局视口的整个可用宽度上。

这可能不是您想要的。您想在屏幕上很好地显示文本。这就是<meta name="viewport" width="device-width">的任务。添加时，布局视口会缩小（在iPhone中为320px），并且文本合适。

来源： A pixel is not a pixel is not a pixel

Answer 6

以下解决方案使用视口元标记不提供，但不不推荐。

使用@media或min-device-width而不是max-device-width或min-width的{​​{1}}查询

使用移动优先方法的示例：

max-width

除非您有充分的理由，否则请始终使用//CSS Rules to apply when screen size < 960 px ( Your mobile rules go here ) @media screen and (min-device-width: 960px) { //CSS Rules to apply when screen size > 960px } 标签。