关于bootstrap响应式布局,国内外名气满满的前端样式布局框架。3.0之前版本都采用less动态css预处理语言,实现机制是通过@media媒介查询来达到样式控制。
例如:
@media screen and (min-width:320px) and(max-width:360px){
html{
width:30px;
height:20px;
}
}
通过一系列规定好的宽高,屏幕处于什么范围,导航栏显示几个,每个内容块宽高多少。是的,你没看错,bootstrap3.0之前都是使用px作为单位,但是从4.0开始便使用rem作为单位。
如果你项目使用rem,那么直接上bootstrap 4.0比较合适。
以下是bootstrap.css相关代码
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;