是否可以在元标记中将内容宽度设置为 100%

Question

是否可以在元标记中将内容宽度设置为 100%。例如，而不是固定像素。我想在包括移动设备在内的任何屏幕上呈现我的页面。任何帮助将不胜感激。

谢谢

Answer 1

您不能在元标记中设置内容百分比。响应式设计的方法首先是：

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

其次是媒体查询：

@media screen and (max-width: 1200px) {
   div {
      width: 100%;
   }
}   

其中 max-width 是您希望媒体查询启动的屏幕宽度，div 是 css 'nesting' 的示例需要预成型。

请注意，您可能需要创建 3 或 4 个不同的媒体查询，以便网站在宽屏、普通、平板电脑和移动设备上看起来都不错。