写入引导程序3媒体查询

Question

我试图在响应式屏幕处于移动视图（小于768px）时正确使用Bootstrap Media Queries来设置字体大小。看来我没有正确使用它，因为段落在我的容器内没有改变。

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

引导媒体查询：

@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/