寫入引導程序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/