Twitter Bootstrap 3 媒体查询答案

【问题标题】：Twitter Bootstrap 3 Media queriesTwitter Bootstrap 3 媒体查询
【发布时间】：2015-09-22 16:43:53
【问题描述】：

如果假设我的设备宽度为 800 像素，将应用（执行）哪个媒体查询？

@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){

}

如果我为屏幕尺寸在 768px 到 991px 之间的设备编写 css，并且我在媒体查询中声明它是 css

 @media only screen and (min-width : 768px){

}

那么前两个媒体查询也将被应用如何避免这种情况。

【问题讨论】：

小 - 平板电脑。这不是 Bootstrap 问题，因为这些断点不是 Bootstrap 原生的。

标签： css

【解决方案1】：

您可以将这三个媒体查询用于 800 像素的宽度根据您的选择

@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){

}

【讨论】：

【解决方案2】：

@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;
@screen-md-max: 1199px;

//xs only
@media(max-width: @screen-xs-max) {}

//small and up

@media(min-width: @screen-sm-min) {}

【讨论】：