gpt4 book ai didi

html - 包装器不工作/页面缩放

转载 作者:太空宇宙 更新时间:2023-11-04 09:29:32 25 4
gpt4 key购买 nike

我还有一个问题。我在我的页面中制作了一个#wrapper 来控制内容的宽度,但是......它不适用于大于 1366 像素的屏幕。

在 1920 屏幕上对其进行了测试,并且在调试器页面中具有包装器的总宽度(不是 1920 而是 1244 像素(包装器宽度))。同样的问题出现在 4k 电视上 - 页面被“缩放”到包装宽度。看起来整个页面的宽度都是包装器,正文/部分上的“宽度:100%”被忽略了。

知道问题出在哪里吗?如果包装器上没有 !important,则最大/最小宽度不起作用。将单位更改为 vw 也不起作用。删除/更改元标记不起作用。没有其他标签会覆盖包装器。样式已在启动时被 SCSS 重置清除。我做错了什么?

html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.aaa {
width: 100%;
height: 300px;
}
#wrapper {
width: 1224px !important;
margin: 0 auto !important;
}
    <html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="Stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<section class="aaa">
<div id="wrapper">
<h2>content</h2>
</div>
</section>
</body>
</html>

应该是这样的:

[-margin-[-wrapper 1224px-]-margin-]

[-----------------1920px-----------------]

在 1920px 分辨率下也是这样:

[--wrapper 1224px----]

[调试器中的-1224px-]

即使屏幕分辨率是1920px

有指向清除页面的链接:www.xileo.pl

以及来自 4k 屏幕的 img:enter image description here

如您所见,有一个 3840 像素的屏幕,其中 wrapper 被缩放到 3840 像素,而不是 1224 像素的边距。我希望它在 1224 像素上有边距。

最佳答案

如果我理解正确,试试这个:

html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.aaa {
width: 100%;
height: 300px;
}
#wrapper {
max-width: 1224px;
margin: 0 auto;
}

如果这对您没有帮助,请提供一个 jsfiddle。

*编辑添加了一个接近 4k 分辨率的屏幕,您的屏幕截图不是来自真正的 4k 设备,它可能被缩放或发生了其他问题,因此您需要通过某种调试来确定那个屏幕。其他一切都按预期运行。您的 css 文件中可能有其他内容可能会覆盖您的代码,因此您发布的部分代码按预期工作。

enter image description here

关于html - 包装器不工作/页面缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40877773/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com