引导媒体断点

Question

有 bootstrap 3 个媒体断点

 /*==========  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，但这意味着

Answer 1

Bootstrap 和一般所有媒体查询通常使用范围定义宽度断点。在这种情况下，在您展示的 css 中，具有相同标题注释的断点是同义词。

您可以使用以下两个选项更好地定义（例如）：

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

您还可以使用另一个（以及连接的可能性）选择器来指定屏幕位置或其他参数。以下是其中的一些：

• 身高
• 方向
• 颜色索引
• 单色
• 分辨率
• 扫描
• 网格