一、移動(dòng)適配

       rem ： 目前多數(shù)企業(yè)在用的解決方案
       vw / vh：未來(lái)的解決方案

1.1 rem

使用rem單位設(shè)置網(wǎng)頁(yè)元素的尺寸
◆網(wǎng)頁(yè)效果：屏幕寬度不同，網(wǎng)頁(yè)元素尺寸不同（等比縮放）
◆px單位或百分比布局可以實(shí)現(xiàn)嗎？
1、px單位是絕對(duì)單位
2、百分比布局特點(diǎn)寬度自適應(yīng)，高度固定

無(wú)rem缺點(diǎn).png

有rem.png

◆rem單位

      a、相對(duì)單位
      b、 rem單位是相對(duì)于HTML標(biāo)簽的字號(hào)計(jì)算結(jié)果
      c、1rem = 1HTML字號(hào)大小 = 屏幕視口的 1/10 ；

1.2 rem移動(dòng)適配 - 媒體查詢

  手機(jī)屏幕大小不同分辨率不同， 如何設(shè)置不同的HTML標(biāo)簽字號(hào)？
  答：媒體查詢

（1）媒體查詢：能夠檢測(cè)視口的寬度，然后編寫差異化的 CSS 樣式；當(dāng)某個(gè)條件成立, 執(zhí)行對(duì)應(yīng)的CSS樣式
（2）寫法：

媒體查詢.png

媒體查詢案列.png

（3）rem單位尺寸：
算法：rem單位的尺寸 = px單位數(shù)值 / 基準(zhǔn)根字號(hào)

尺寸大小.png

（4）擴(kuò)展

  1、flexible.js是手淘開發(fā)出的一個(gè)用來(lái)適配移動(dòng)端的js框架。
  2、核心原理就是根據(jù)不同的視口寬度給網(wǎng)頁(yè)中html根節(jié)點(diǎn)設(shè)置不同的font-size。

擴(kuò)展.png

二、Less

 1、 Less是一個(gè)CSS預(yù)處理器, Less文件后綴是.less
2、擴(kuò)充了 CSS 語(yǔ)言, 使 CSS 具備一定的邏輯性、計(jì)算能力。
3、注意：瀏覽器不識(shí)別Less代碼，目前階段，網(wǎng)頁(yè)要引入對(duì)應(yīng)的CSS文件。

（1）用法：

1、注釋

▲單行注釋
語(yǔ)法：//注釋內(nèi)容
快捷鍵：Ctrl+/
▲塊注釋
語(yǔ)法：/* 注釋內(nèi)容 */
快捷鍵： shift + alt + A

注釋.png

算法.png