四、響應式布局

4.1 rem單位

• 設置***文字大小***的單位

  • px：設置為固定的css像素

  • em：相對于父元素字體的大小

  • %：相對于父元素字體的大小

  • rem：相對于根元素（html）的字體大小

• 設置***寬度***的單位

  • px：設置為固定的css像素

  • em:

    • 如果自身有font-size，em相對于自己的font-size

    • 如果自身沒有font-size，em相對于父元素的font-size

  • %：相對于父元素的寬度大小

  • rem：相對于根元素（html）的字體大小

• 總結：**rem單位永遠相相對于根元素（html）的字體大小

  • html {font-size: 12px; }div {font-size: 2rem; /* 24px */width: 5rem; /* 60px */background-color: skyblue; }

4.2 媒體查詢

• 媒體查詢（Media Query）是CSS3新語法。

  • 使用 @media 查詢，可以針對不同的媒體類型定義不同的樣式

  • @media 可以針對不同的屏幕尺寸設置不同的樣式

  • 使用@media才能夠實現頁面響應式布局

• 媒體查詢語法規范：

  • @media mediatype and|not|only (media feature) {CSS-Code;}

  • 媒體類型：all(所有設備)、screen(用于電腦屏幕，平板電腦，智能手機等。)

  • media feature：

    • width(瀏覽器的窗口尺寸，可加min/max)
    • device-width(設備的參數尺寸，可加min/max)

• min-width和max-width

  • min-width：最小寬度，在媒體查詢中，寬度大于或者等于最小寬度時，就觸發其CSS樣式
  • max-width：最大寬度，在媒體查詢中，寬度小于或者等于最大寬度時，就觸發其CSS樣式

媒體查詢一般寫四套設備方案，在編寫媒體查詢時注意順序(從小到大)，后者符合條件的媒體查詢會覆蓋前者

4.3 rem + 媒體查詢

• 媒體查詢 + rem實現元素動態大小變化

  • rem單位是相對于html元素的字體大小的，我們可以將元素所有的css單位都設置為rem單位
  • 通過媒體查詢，可以根據不同的屏幕寬度設置不同的HTML元素的字體大小，以此達到頁面元素大小的動態變化

• 引入媒體查詢的css文件資源

  • 針對于不同的屏幕尺寸 調用不同的css文件
• <link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

4.4 rem適配方案（了解）

• 核心：使用媒體查詢根據不同設備按比例設置***html的字體大小***，然后頁面元素使用***rem做尺寸單位***

  • 當html字體大小變化。元素尺寸也會發生變化，從而達到等比縮放的適配

• rem適配方案***流程***：

• 按照設計稿與設備寬度的比例，動***態計算并設置 html*** 根標簽的 font-size 大小；（媒體查詢)
• CSS 中，設計稿元素的寬、高、相對位置等取值，按照同等比例換算為 rem 為單位的值

• rem適配方案的技術選擇

• 核心：rem + 媒體查詢 + less 技術

• 動態設置 html 標簽 font-size 大小

  ① 假設設備寬度是750px

  ② 假設我們把整個屏幕劃分為15等份（劃分標準不一可以是20份也可以是10等份）

  ③ 每一份作為html字體大小，這里就是50px

  ④ 那么在320px設備的時候，html元素的字體大小為320/15 就是 21.33px

  ⑤ 用我們頁面元素的大小 除以不同的 html 字體大小會發現他們比例還是相同的

  ⑥ 但是已經能實現不同屏幕下 頁面元素盒子等比例縮放的效果

• 元素中的***rem單位***取值

  • 公式： 頁面元素的rem值 = 頁面元素值（px） / html font-size 字體大小

4.5 響應式布局總結

• 實現思路：

• 一般都是先實現PC端頁面，然后再去做其他設備的兼容

• 設置寬度時，最好不要寫死(px)，而是用%單位參照父元素的大小

• 設置最外層容器時，用vw, vh作單位

• 不同設備需要換行顯示時，使用flex-direction:columns;

• 導航條一定條件下，顯示隱藏

• 內邊距和外邊距還有高度可以適當的用px單位

• 媒體查詢時，主要的改變有：換行顯示、隱藏，其余都是小改動，比如font-size, margin等等

總結

以上是生活随笔為你收集整理的CSS之响应式布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。