有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) {
}
我只是不明白为什么在移动中第一个min-width和max-width在非移动设备中被描述为相等。我的意思是例如平板电脑的最小宽度= 768px，所以它意味着所有宽度＆gt;对于平板电脑而言，最大宽度为768，但这意味着＆lt; 768。 768px，它看起来像移动设备中的平板电脑范围= 768-991px和非移动设备481-768
答案 0 :(得分：0)
Bootstrap，通常所有媒体查询通常都会定义带有范围的宽度断点。在这种情况下，在您展示的CSS中，具有相同标题注释的断点是同义词。
您可以使用这两个选项（例如）更好地定义：
/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) and (min-width: 321px) { }
您还可以使用另一个（和连接的可能性）选择器来指定屏幕位置或其他参数。以下是其中一些内容：