2017-11-28 4 views
0

は、ブートストラップ3つのメディアブレークポイントがありますブレークポイントブートストラップメディアは

私は非モバイルでのモバイル最初のmin-widthとmaxの幅に等しいと説明した理由を理解しない
/*========== Mobile First Method ==========*/ 

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 

} 

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { 

} 

/*========== Non-Mobile First Method ==========*/ 

/* Large Devices, Wide Screens */ 
@media only screen and (max-width : 1200px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (max-width : 992px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (max-width : 768px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) { 

} 

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) { 

} 

。つまり、タブレットの最小幅= 768pxを意味するので、すべての幅が768を超え、タブレットの最大幅が768であることを意味しますが、それは< 768pxを意味します。モバイル版= 768-991px非モバイルでは481-768

答えて

0

ブートストラップであり、一般にすべてのメディアクエリでは、幅のブレークポイントが範囲で定義されます。この場合、あなたが示したCSSでは、同じヘッダーコメントを持つブレークポイントは同義語です。

あなたはこのような二つのオプション(例えば用)とのより良い定義することができます。

/* Extra Small Devices, Phones */ 
@media only screen and (max-width: 480px) and (min-width: 321px) { } 

また、画面の位置または他のパラメータを指定するために、別の(そして働かが連結する)セレクタを使用することができます。ここでは、このの一部です:

  • 高さ
  • 向き
  • カラーインデックス
  • モノクロ
  • 解像度
  • スキャン
  • グリッド