包裝不工作/頁面縮放

我有另一個問題。我在頁面中創建了一個#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

包裝不工作/頁面縮放

回答

相關問題