bootstrap的less文件分析之@media媒介查询

关于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;