Question

我有另一个问题。我在我的页面中创建了一个#wrapper来控制内容的宽度，但...... 它不是在1366px以上的大屏幕上工作。

在1920年的屏幕上测试它，在调试器页面中有包装器的总宽度（不是1920但是1244px（包装器宽度））。同样的问题出现在4k电视上 - 页面被“缩放”到包装宽度。看起来页面的整个宽度是包装，并且忽略了body / sections上的“width：100％”。

知道哪里有问题？没有！重要的包装器，相同，最大/最小宽度不起作用。将单位改为vw也不起作用。删除/更改元标记无效。没有其他标记可以覆盖包装器。开始时SCSS Reset已清除样式。我做错了什么？

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：

正如你所看到的，有3840px的屏幕，其中包装器缩放到3840px而不是1224px的边距。我希望它的利润率为1224像素。

Answer 1

如果我理解正确的话，试试这个：

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设备，它可能是缩放或其他东西正在进行所以你需要通过某种调整来计算那个。所有其他行为都符合预期。您可能在ur css文件中还有其他内容可能会覆盖您的代码，因此您发布的部分代码正在按预期工作。

Answer 2

更新： https://jsfiddle.net/8yt3fp0k/ css工作，SCSS肯定有问题，可能是另一个#wrapper被定义为提取的其他地方。

的CSS：

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

Answer 3

如果你希望它在更大的分辨率上有所不同，那么改变宽度：

[Train.js]
var mod2 = angular.module('mod2',[angular.module('mod1')]);
mod2.factory('Train',[function(){
...
}]);

Answer 4

问题编辑后的新答案和发布到原始网站的链接：

你有这个规则：

.index .main-page .main .main-box .about-us {
    width: 100%;
    padding-right: 370px;
}

这使得上部文本块具有非常大的右边距，这会减小其宽度。您可以删除该规则以在about-us的整个宽度上拉伸wrapper。

但是，如果您希望.about-us在第一个wrapper内缩小并水平居中，请将该规则更改为

.index .main-page .main .main-box .about-us {
    width: 1224px; /* any value you like */
    position: relative;
    margin: 0 auto;
}

另外，请注意两件事：

1。）wrapper具有1224px限制，也可用于其他部分。因此，如果您希望后续部分（具有四个文本块的部分）跨越更宽的屏幕，请更改包装规则中的width和max-width值

2。）您不止一次使用wrapper。但它绑定到ID，每页只能使用一次。因此，您应该将CSS中的#wrapper更改为.wrapper，将HTML元素中的所有 id = "wrapper"属性更改为class = "wrapper"

包装器不工作/页面缩放

4 个答案: