rem方案自適應(yīng)適配屏幕

準(zhǔn)備工作

1.下載插件lib-flexibl

lib-flexible自動在html的head中添加一個meta name="viewport"的標(biāo)簽，同時自動設(shè)置html的font-size為屏幕寬度除以10，也就是1rem等于html根節(jié)點的font-size。

 // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

github傳送門 lib-flexible

2.vscode安裝px to rem 插件

插件截圖

開始配置

1.項目引入lib-flexibl

<script src="./js/lib-flexible.js"></script>

2.配置px to rem插件

插件配置37.5

假如設(shè)計稿的寬度是375px，此時1rem應(yīng)該等于37.5px。所以在插件中配置font-size默認(rèn)是37.5（375效果圖寬度/10）。

3.使用插件開發(fā)頁面

在css中填寫375效果圖的尺寸時，會提示選擇對應(yīng)的rem。

.box{
  width: 2.6667rem;
  height: 2.6667rem;
}

代碼截圖

rem實現(xiàn)web端屏幕適配

根據(jù)實際效果圖（1920*1080）的寬度設(shè)置插件的font-size默認(rèn)是192（1920效果圖寬度/10）。

插件配置192

vw方案自適應(yīng)適配屏幕

插件配置750

vw方案只需要在插件中勾選使用vw的按鈕，設(shè)置設(shè)計稿的尺寸即可，750的設(shè)計稿就寫750,1920設(shè)計稿就寫1920。即可完成配置

.box {
  width: 13.3333vw;
  height: 13.3333vw;
}

代碼截圖