元标签的响应式网页设计答案

【问题标题】：Responsive web design by meta tag元标签的响应式网页设计
【发布时间】：2022-04-04 10:05:59
【问题描述】：

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

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

【问题讨论】：

How to implement responsive web design and its best practices的可能重复

标签： css html responsive-design

【解决方案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;
    }
}

【讨论】：

【解决方案2】：

看看this，bootstrap 有它自己的媒体查询也响应。

【讨论】：

【解决方案3】：

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

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

谢谢！

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

如果您的页面足够窄以适合屏幕，这很重要。在没有任何 CSS 宽度声明且没有 <meta> 标记的情况下获取此页面。它延伸到布局视口的整个可用宽度。

这可能不是你想要的。您希望将文本很好地适应屏幕。这就是<meta name="viewport" width="device-width"> 的任务。添加后，布局视口会缩小（在 iPhone 的情况下为 320 像素），并且文本适合。

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

【讨论】：

【解决方案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"> 标签。

【讨论】：