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：覺得自己文筆好差，做筆記都不知道些什麼。只能說，堅持堅持在堅持，努力努力在努力。