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;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dl-horizontal dd {
    margin-left: 180px;
  }
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

在研究bootstrap之前，我一直以为它使用的是rem单位，而不是px。真相原来是bootstrap 4.0才开始使用rem，希望大家不要像我一样想当然咯。

而我们使用rem方式，大体类似，当然这里没有研究bootstrap 4.0，因为它变成sass动态语言，本人目前打算先搞懂less。给出个人以前使用方式，结合font-size值。

rem默认对应font-size是16px，但如果你自己赋值，就应该做相应计算。

@media screen and (max-width:319px){
	html{
		font-size: 16px;
	}
}
@media screen and (min-width:320px) and(max-width:360px){
	html{
		font-size: 21.5px;
	}
}
@media screen and (min-width:361px) and(max-width:415px){
	html{
		font-size: 28px;
	}
}
@media screen and (min-width:416px) and(max-width:767px){
	html{
		font-size: 48px;
	}
}

使用rem单位：

img{width:14.825rem;height: 10.667rem;}

再使用rem之前，我们一般会使用设计稿，一般是750px，针对移动端。然后我们就现在750px模式下布局好，然后根据公式换算，将px换成rem。这里其实可以使用插件，less sass等公式计算。

当然，你也可以使用js进行屏幕判断，计算。具体的，下次有时间研究在写个笔记。

PS：觉得自己文笔好差，做笔记都不知道些什么。只能说，坚持坚持在坚持，努力努力在努力。