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

Question

我想知道除了使用这个元标签之外，还有什么方法可以实现响应式网页设计：

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

Answer 1

下面的元标记只会将初始比例重置为 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，bootstrap 有自己的媒体查询，也具有响应能力。

Answer 3

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

虽然这不是响应式页面的理想方式。

谢谢！

Answer 4

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

Answer 5

<meta name="viewport" content="width=device-width">

标签（最初是Apple专有的）实际上使布局视口完全适合设备。

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

如果添加

<meta name="viewport" width="device-width">

，则此布局视口的宽度将限制为设备宽度（以设备像素为单位）； iPhone 手机壳里有 320 个。

如果您的页面足够窄以适合屏幕，那么这一点很重要。此页面没有任何 CSS 宽度声明，也没有

<meta>

标签。它延伸到布局视口的整个可用宽度。

这可能不是您想要的。您想让文本很好地适应屏幕。这就是

<meta name="viewport" width="device-width">

的任务。当您添加它时，布局视口会收缩（在 iPhone 上为 320 像素），并且文本适合。

来源： 像素不是像素不是像素

Answer 6

以下解决方案提供了响应能力，无需使用视口元标记，但不推荐。

使用带有

@media

或

min-device-width

的

max-device-width

查询，而不是

min-width

或

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 

}

除非你有很强的推理能力，否则总是使用

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

标签。

Answer 7

网站设计迪拜 迪拜网站设计：迪拜的响应式网页设计公司是迪拜领先的网页设计和开发机构，在迪拜、阿布扎比和阿联酋沙迦提供经济实惠、现代且响应式的网页设计服务