使用 CSS 创建响应式网页（需要有关页面宽度的帮助）

Question

我正在尝试为四种屏幕尺寸（320 像素、640 像素、980 像素和 1024 像素）创建响应式网页。因此，当我调整网站大小时，一切看起来都很好，所有响应都很好，但是当我使大小大于 1024px 时，我想停止任何调整大小的操作并使页面看起来像大小为 1024px 时的样子。我试图在互联网上寻找解决方案，但我没有。那么有人可以帮助我吗？谢谢！

P.S。我找到了有关使用 max-width 属性的信息，但没有帮助。我使用 vw 单位来定义尺寸。

Answer 1

当宽度超过 1024 时，您必须为页面使用以像素为单位的特定宽度。比如你有一个1024码下的.container {width:100%;}，你可以加上：

    @media screen and (min-width: 1024px) {
.container {
    width:1000px;
}}

当屏幕大于 1024px 时，您的 .container 宽度仍为 1000px。

Answer 2

您可以使用视口元标记来控制您的布局。

本文将为您提供帮助。

https://developers.google.com/speed/docs/insights/ConfigureViewport

使用 CSS 创建响应式网页（需要有关页面宽度的帮助）

Create responsive web page with CSS (need help about page width)

html

css

viewport

responsive-design