@mediaの画面単位はピクセルではないので、それは何ですか？

Question

これは私が欲しいものです

ブラウザが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; 
    } 
} 

私の質問は、ブラウザの幅が900pxではなく932pxでどのように分割されるのですか。 ピクセルでない場合、これらの単位は何ですか？

私はちょうどPhotoshopのブラウザ幅を測定しようとしましたが、それは正確に975ピクセルに分割します。

CSSは900 pxと言っていますが、Chromeは932 pxと言います。フォトショップは975 pxと言います これは本当に混乱していますか？

Answer 1

短い答え：

あなたは、親コンテナのbox-sizingプロパティをリセットしていません。

---

長い答え：

はこの考えてみましょう：CSSで

を、デフォルトでは、あなたが要素に割り当てる幅と高さが唯一の要素のコンテンツボックスに適用されます。要素にボーダーやパディングがある場合は、これを幅と高さに加えて、スクリーン上にレンダリングされるボックスのサイズにします。

あり、あなたが知っておくべきbox-sizingにおける二つの値について

1. コンテンツ・ボックス

   [...]デフォルトであり、そしてあなたのデフォルトのCSSボックスを提供しますサイズの挙動。 要素の幅を100ピクセルに設定すると、要素のコンテンツボックス は100ピクセル幅になり、境界線またはパディングの幅は最終レンダリング幅に になります。

2. ボーダーボックス

   は、[...]あなたは、幅と高さを指定する 価値のボーダーとパディングを考慮して、ブラウザに指示します。要素の幅を に100ピクセルに設定すると、その100ピクセルには境界線または埋め込みが追加され、 が追加され、その余分な幅を吸収するためにコンテンツボックスが縮小されます。 これは通常、要素のサイズをもっと簡単にします。

私は通常あり、このようなnormalize.cssなどのデフォルトプロパティの多くをリセットする多くのフレームワークであるが、私は頻繁にありません

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

、このような問題を回避するために、以下で任意のCSSシートを開始それらを使用する必要性。

---

以下にデモを設定しました。 2つの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どちらも同じですか？

Answer 2

ほとんどのブラウザでスクロールバーの幅は17pxで、画面の幅には影響しません。開発ツールでFirefoxのレスポンシブデザインモードを試してみてください。