包装不工作/页面缩放

我有另一个问题。我在页面中创建了一个#wrapper来控制内容的宽度，但是... 它不适用于比1366px更大的屏幕。包装不工作/页面缩放

在1920屏幕上测试它，并在调试器页面中具有包装的总宽度（不是1920但是1244px（包装宽度））。同样的问题是在4k电视 - 页面被“缩放”为包装宽度。它看起来像页面的整个宽度是包装和身体/部分“宽度：100％”被忽略。

任何想法哪里有问题？没有！重要的包装其相同，最大/最小宽度不起作用。改变单位也不适用。删除/更改元标记不起作用。没有其他标签覆盖包装。 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 - [ - 包装1224px - ] - 与容限]

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

和它的那样在1920px分辨率：

[--wrapper 1224px ----]

[-1224px在debugger-]

即使屏幕分辨率为1920px

有链接清除页面：www.xileo.pl

而且从4k屏幕img：

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

来源

2016-11-29 Krece

提供（例如jsfiddle.net）一个完整的工作示例。 – Dekel

我真的不明白。你已经声明为1224px的包装宽度和它的内容。对于每个屏幕分辨率，它将是1224像素，因为您声明的是，无论是身体宽度还是html宽度 – codexy

在代码中，包装器在100％宽度的其他div中。所以在1920px宽度的屏幕上，包装应该保持在1224px的网站，并且两边应该是空格（保证金：0 auto;在包装上）。 – Krece

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

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文件中有其他东西可能会覆盖你的代码，所以你发布的部分代码按预期工作。

来源

2016-11-30 00:00:19

正如我看到这是我的代码没有！重要，并与结束标签（这是复制和粘贴错误）。 – Krece

除此之外，max和已使用和重要的类都被删除，因此被翻译成scss。最大宽度是您需要的属性。 –

Eddited主帖，有4k屏幕的链接和照片。 – Krece

更新： https://jsfiddle.net/8yt3fp0k/ CSS的作品，肯定有点问题SCSS，另一种可能是#wrapper指定其他definned某处的剪断提供的。

CSS：

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

来源

2016-11-30 00:00:39 Czakalli

只需复制和粘贴错误，即可正常使用scss。 – Krece

然后把scs放在jsfiddle上，也许更好地解释你确切需要什么，测试我的代码并且工作正常。宽度永远不会超过1224px。 – Czakalli

它应该是这样的： [-margin - [ - wrapper 1224px - ] - margin-] [----------------- 1920px ------- ------------] 以及它在1920px的分辨率： [-wrapper 1224px ------] [-1224px in debugger-] 即使屏幕分辨率是1920px – Krece

如果你希望它是在更大的分辨率不同，比变动幅度：

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
.aaa { 
    width: 100%; 
    height: 300px; 
} 
#wrapper { 
    width: 1224px; 
    margin: 0 auto; 
} 
@media only screen and (max-device-width: 1224px) { 
#wrapper { 
    width: 100%; 
    margin: 0 auto; 
} 
}

来源

2016-11-30 01:13:29 codexy

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

你有这条规则：

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

这给上面的文本块一个非常大的右边填充减少了它的宽度。您可以在整个wrapper的整个宽度上删除该规则以应对about-us。

但是，如果你想.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限制，也在其他部分内部使用。所以如果你想以后的部分（带有四个文本块）跨越更宽的屏幕伸展，在您使用wrapper不止一次包装规则

2）改变width和max-width值。但它被绑定到一个ID，它应该每页只能使用一次。所以，你应该改变#wrapper在CSS .wrapper和所有id = "wrapper"属性在HTML元素class = "wrapper"

来源

2016-11-30 01:46:58 Johannes

eddited主帖子，从4k屏幕有链接和照片。 – Krece

请注意我的完全改变的答案 – Johannes

忽略包装内的内容。这里的所有内容都是关于这些部分内的部分（屏幕宽度为100％）和包装（1224px）。在更大的屏幕上它应该是MARGIN [WRAPPER] MARGIN。但它只是[WRAPER]正如你可以在屏幕上看到的从4k屏幕（3800 + px宽度）。它应该只在包装器上使用“margin：0 auto”，但它没有。所有我要的是（例如用于1920px screns）： 348px保证金左+包装+ 1224px保证金348px权一共是1920 广告。 ID的 - 真的。将解决它。 – Krece

包装不工作/页面缩放

回答

相关问题