基本的移動端適配

語言: CN / TW / HK
時間 2021-11-23 11:15:05

這是我參與11月更文挑戰的第15天，活動詳情檢視：2021最後一次更文挑戰

為什麼要適配移動端？

  1. 一個專案一般擁有移動端和pc端的產品圖
  2. 我們為了減少工作量會在開發pc端時同時使它適配移動端

如何適配移動端

單位

在進行移動端適配的時候我們首先要考慮到元素單位的設定

  • 相對單位

  • %: 百分比

  • em: Element meter 根據文件字型計算尺寸
  • rem: Root element meter 根據根文件（ body/html ）字型計算尺寸
  • ex: 文件字元“x”的高度

  • ch: 文件數字“0”的的寬度

  • vh: View height 可視範圍高度

  • vw: View width 可視範圍寬度

  • vmin: View min 可視範圍的寬度或高度中較小的那個尺寸

  • vmax: View max 可視範圍的寬度或高度中較大的那個尺寸

  • 絕對單位

  • px: Pixel 畫素

  • pt: Points 磅
  • pc: Picas 派卡
  • in: Inches 英寸
  • mm: Millimeter 毫米
  • cm: Centimeter 釐米
  • q: Quarter millimeters 1/4毫米

單位使用

  1. 相對單位的使用

  2. %：相對於父元素寬度

    ```html

    ```

  3. em:相對於當前文件物件內文字的字型尺寸而言，

    若未指定字型大小則繼承自上級元素。

    以此類推，直至 body，若 body 未指定則為瀏覽器預設大小。

    css body { font-size: 14px; } .element { width: 2em; /* 2em === 28px */ }

  4. rem :根據根文件（ body/html ）字型計算尺寸

  5. vh:相對於可視範圍的高度和寬度，可視範圍被均分為 100 單位的 vh/vw

    css div { height: 10vh; /* 如果螢幕高度為1000px，則該元素高度為100px */ }

  6. vmin / vmax 可視範圍的寬度或高度中較小/較大的那個尺寸

    假設螢幕高度為960px，寬度為500px

    css div { height:1vmax; width:2vmin; }

    該盒子寬度為10px，高度為19.2px。

  7. 絕對單位的使用

  8. px:畫素 px 相對於裝置顯示器螢幕解析度而言

    css div { height:100px; wight:100px; }

  9. pt:1 pt = 1/72 英寸

  10. pc:十二點活字（印刷中使用的），相當於我國新四號鉛字的尺寸。

  11. in:英寸

  12. mm:毫米

  13. cm:釐米

  14. q:四分之一毫米

媒體查詢

媒體查詢故名思意，查詢媒體型別來進行不同的操作

  1. 語法

css @media screen and (max-width: 300px) { 樣式表 }

  • screen為媒體型別

  • max-width為媒體功能

  • 使用手冊

傳送門

「」
「」