@media屏幕單位不是像素，那它們是什麼？

-2

如果瀏覽器大於900px，我希望框爲700px。一旦瀏覽器寬度小於900px，我希望框爲600px。

@media screen and (min-width : 750px) and (max-width : 900px) { 
    .multiSelect .checkboxLayer { 
     width: 600px; 
    } 
} 
@media screen and (min-width: 900px) { 
    .multiSelect .checkboxLayer { 
     width: 700px; 
    } 
}

我的問題是，怎麼瀏覽器寬度分裂932px而不是900px？這些是什麼單位，如果不是像素？

我只是試圖測量用Photoshop瀏覽器的寬度，它在975像素準確分割。

所以CSS表示900像素，Chrome說932像素和Photoshop說975像素這真的令人困惑？！？！

來源

2017-08-08 torbenrudgaard

您需要顯示一個最小但完整的標記示例來顯示問題：[mcve] – Rob

Hi Rob - 通常我會這樣做，但用於構建'.multiSelect .checkboxLayer'的CSS很龐大，它太多了張貼在這裏。但是我會試着看看我能否做出一個更簡單的例子，使其更易於運行和調試。 – torbenrudgaard

這是我們可以幫助的唯一方法。否則，這是一個瘋狂的猜測。 – Rob

簡短的回答：

您沒有重置box-sizing屬性父容器。

長的答案：

考慮一下：

在CSS中，默認情況下，寬度和高度分配給一個元素僅應用於元素的內容框。如果元素具有任何邊框或填充，則會將其添加到寬度和高度，以獲得在屏幕上呈現的框的大小。

有兩個值box-sizing，你應該知道

內容盒

[...]默認值，併爲您的默認CSS盒子大小的行爲。如果將元素的寬度設置爲100像素，則元素的內容框將爲100像素寬，並且將任何邊框或填充的寬度將添加到最終呈現寬度。
邊界框

[...]告訴瀏覽器佔了價值的邊框和填充您指定的寬度和高度。如果將元素的寬度設置爲100像素，則100個像素將包含您添加的任何邊框或填充，並且內容框將縮小以吸收該額外寬度。這通常會使元素的大小更容易。

我通常有下面幾種，以避免此類問題

啓動任何CSS片

* { 
    box-sizing: border-box; 
    padding: 0; 
    margin: 0 
}

有跡象表明，更多的復位的默認屬性，如normalize.css但我通常沒有很多框架需要使用它們。

我在下面設置了一個演示。有兩個div元素。還有一個媒體查詢。

兩個元素都相同固定width在px。唯一的區別是被設定爲border-box爲box-sizing

第一值和第二設置爲content-box

div { 
 
    width: 400px; 
 
    height: 400px; 
 
    margin: 3em; 
 
    text-align: center; 
 
    background: darkred; 
 
    border: 20px solid #131418 
 
} 
 

 
@media (max-width: 800px) { 
 
    div { 
 
    background: darkgreen; 
 
    width: 300px; 
 
    } 
 
} 
 

 
.first { 
 
    box-sizing: border-box 
 
} 
 

 
.second { 
 
    box-sizing: content-box 
 
}

<div class="first"></div> 
 
<div class="second"></div>

通知他們不同大小的呈現方式，即使width兩者是一樣的嗎？

來源

2017-08-08 03:54:13

我不知道！ - 非常有趣 - 感謝教我一些新的編碼器貓:-) – torbenrudgaard

沒問題@torbenrudgaard我很樂意提供幫助。謝謝！ –

大多數瀏覽器的滾動條寬度爲17px，並且不影響屏幕寬度。在開發工具中嘗試使用Firefox的響應式設計模式。

來源

2017-08-08 02:09:52 frattaro

我不知道這是如何回答這個問題任何方式，形狀或形式。 – Rob

@Rob想象一下，你以前從未見過一條船，但有一天你站在岸邊，有一天正在遠處漂浮 - 你問你的朋友「你有沒有見過這樣的鯨魚？他告訴你「船已經習慣漂浮在水面上。」他有回答你的問題嗎？ – frattaro

你的評論沒有比你的答案更有幫助。想象一下，從現在開始，一年後有人會問這個問題，同樣的問題是尋找答案。 – Rob

@media屏幕單位不是像素，那它們是什麼？

回答

相關問題