Question

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

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

引导媒体查询：

@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媒体查询

1 个答案: