响应式设计css风格的景观

Question

我知道这听起来很愚蠢，但我已经搜索了stackoverflow，并且大多数问题讨论了当iphone从纵向切换到横向时视图切换错误。

这是我的问题。我为iphone设计了纵向视图，我手动重新定义了大多数div的宽度。该网站现在可以在纵向视图中正常工作。现在我即将开发横向视图，我只希望网站显示符合屏幕的大小，并保持在普通浏览器中显示的格式。对于此视图，不再为每个div的单独css样式表设计。只是让它在普通浏览器中显示相同的格式，但更小，以适应手机上的横屏大小。是否可以设置一些东西，以便整个网站可以适应大小？

 @media screen and (min-device-width: 481px) and (orientation:landscape){

        //what can I put here to make the whole site fit into the landscape screen?

}

Answer 1

如果我没有误解你的问题，你首先需要一个视口

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

然后只需将包装器的宽度设置为100％，或尝试使用网格系统。