流式佈局和響應式佈局

流式佈局（百分比佈局）

• 在CSS2時代就有，主要指的是將頁面中元素的寬度以百分比表示並進行排版，能夠在不一樣分辨率下顯示相同的版式

響應式佈局

• 關鍵技術是CSS3中的媒體查詢，能夠在不一樣分辨率下對元素從新設置樣式（不僅是尺寸），在不一樣屏幕下能夠顯示不一樣版式

　　舉例：

• 能夠實現不一樣尺寸屏幕下對不一樣元素的顯示與隱藏

@media screen and (min-width: 769px) and (max-width: 979px) {
  .w {
    width: 750px;
  }
  .top_nav ul li:first-child {
    display: none;
  }
  .nav ul li:last-child {
    display: none;
  }
  .bottom_cards .cards .item {
    width: 49%;
  }
  .bottom_cards .cards:after {
    display: none;
  }
}

• 能夠實現不一樣尺寸屏幕下的元素尺寸適配

/* 
設計圖寬度爲640px，
計算font-size的方法爲： 要適配的屏幕尺寸/設計圖尺寸*默認下的文字大小
即： 320/640*32 = 16（px）
*/
@media only screen and (width: 320px) {
  html {
    font-size: 16px;
  }
}
/* 即： 360/640*32 = 18（px） */
@media only screen and (width: 360px) {
  html {
    font-size: 18px;
  }
}
/* 即： 375/640*32 = 18.75（px） */
@media only screen and (width: 375px) {
  html {
    font-size: 18.75px;
  }
}
/* 即： 414/640*32 = 20.7（px） */
@media only screen and (width: 414px) {
  html {
    font-size: 20.7px;
  }
}