编写 Bootstrap 3 个媒体查询

Question

当响应式屏幕处于移动视图（小于 768 像素）时，我正在尝试正确使用 Bootstrap 媒体查询来设置字体大小。看来我没用好，因为段落在我的容器中没有改变。

谁能告诉我我做错了什么或者给我一个如何正确使用媒体查询的例子？

Bootstrap 媒体查询：

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

@media (min-width: @screen-md-min) { ... }

@media (min-width: @screen-lg-min) { ... }

CSS:

@media(max-width:768px){
    .aboutBlock{
        font-size: 12pt; 
    }
}

.aboutBlock{ 
    font-size: 25pt; /*I WANT THIS TO BE THE DEFAULT FOR ALL OTHER SCREENS*/
    font-family: asap-bold;
}

HTML:

<div class="container-fluid aboutSection">
    <blockquote class="aboutBlock">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut auctor ante, eget congue nunc. Maecenas pharetra eu sem vel maximus. Duis ornare pretium porttitor.</p>
    </blockquote> 
</div> <!--container-fluid aboutSection-->

Answer 1

你搞反了。您需要在媒体查询之前设置默认值。这假定了移动优先的方法。例如，来自 documentation:

/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

所以你的代码实际上看起来像：

.aboutBlock{ font-size: 25pt; /*I WANT THIS TO BE THE DEFAULT FOR ALL OTHER SCREENS*/ font-family: asap-bold; } @media(max-width:768px){ .aboutBlock{ font-size: 12pt; } }

实时 jsbin 示例：https://jsbin.com/nunuba/

编写 Bootstrap 3 个媒体查询

Writing Bootstrap 3 Media Queries

html

css

media-queries

twitter-bootstrap