最佳移動端h5自適應rem適配方案

時間 2019-12-09

標籤最佳移動 h5 自適應 rem 適配方案欄目無線简体版

原文原文鏈接

1、利用lib-flexible、postcss-px2rem插件進行移動端rem適配。
javascript

一、第一css

　　引入lib-flexible . html

　　安裝lib-flexible：　　npm i lib-flexible --save-devjava

　　在項目的入口main.js文件中引入lib-flexible: import 'lib-flexible'，webpack

　　在index.html中去掉meta name="viewport" 標籤由於 lib-flexble插件會自動計算添加meta name="viewport" 視口標籤git

二、第二web

　　使用postcss-px2rem自動將css中的px轉換成rem（真的是大大提高了咱們的工做效率，棒棒的，不用本身去瞎算啊）npm

　　安裝postcss-px2rem ：　　npm install postcss-px2rem --save-dev瀏覽器

三、配置postcss
　　在build文件夾中找到 utils.js ，配置以下：佈局

　　const px2remLoader = {

　　　　loader: 'px2rem-loader',

　　　　options: {

　　　　　　remUnit: 75 // (這裏是指設計稿的寬度爲 750 / 10)

　　　　}

  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS
      ? [cssLoader, px2remLoader]
      : [cssLoader,px2remLoader ];
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      });
    }

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:'../../',
        fallback: 'style-loader'
      });
    } else {
      return ['style-loader'].concat(loaders);
    }
  }

五、最後，咱們須要知道flexible的轉換不包括第三方ui庫，具體去官網看下：網上有許多解決辦法，首先咱們要知道，根源是由於移動端ui庫，原本就是適配了移動端尺寸，而fliexble再去適配一次，能不變小嗎？

那麼就知道解決辦法了，總結大體以下：

　　一、固定縮放比，即dpr爲1，不推薦，全局設置不易調控；

　　二、給不但願轉化rem的組件，設置px的時候，單位後面加上／* no *／即不會轉化px --- 通常border需用這個

　　三、在它轉化以前就設置rem，我的推薦該法，利用VScode的px to rem，將寫好的px，直接選中option+z轉爲rem，而後fliexble就在webpack編譯的時候不去轉化它了。

　　四、在px後面添加/*px*/,會根據dpr的不一樣，生成三套代碼。---- 通常字體需用這個

這裏推薦移動端的ui庫：vant-ui,與該適配方案完美結合使用；

vant-ui相比其餘移動端ui庫優點：

1. 60+ 高質量組件，組件豐富
2. 很詳細完整的中英文文檔
3. 支持現代瀏覽器以及 Android 4.0+, iOS 7+
4.在gitHub上已得到11.9K的星，用戶量持續增多
5.源碼由有贊團隊一直持續維護中。
6.相比其餘移動端Ui庫，組件更豐富齊全，功能傳參方式簡單易懂，文檔齊全，容易上手。

至此，結束。

2、rem適配方法，適合窗口大小可能會改變以及設計圖小於750，或者大於750設計稿的狀況
該方法，將100px爲1rem，根據設計稿尺寸縮小100就爲 rem，
　　例如：font-size:14px,換成rem就爲0.14rem, div{width:10px;}換成rem就是div{width:0.10rem;}

fnResize()

window.onresize = function () {

fnResize()

}

function fnResize() {

var deviceWidth = document.documentElement.clientWidth || window.innerWidth

if (deviceWidth >= 750) {

deviceWidth = 750

}

if (deviceWidth <= 320) {

deviceWidth = 320

}

document.documentElement.style.fontSize = (deviceWidth / 7.5*2) + 'px'

}

</script>

3、rem適配方法，適合移動設備爲固定的某個寬度，以及設計圖爲固定的某個值例如750，或者pad,1920的狀況
該方法，將100px爲1rem，根據設計稿尺寸縮小100就爲 rem，
　　例如：font-size:14px,換成rem就爲0.14rem, div{width:10px;}換成rem就是div{width:0.10rem;}
　　

/**

* 頁面自適應方法使用rem單位

* 須要根據佈局視口的尺寸動態設置font-size的值

* 不管在什麼設備下，咱們頁面的總寬度都是19.2rem，因此咱們直接在設計圖上測量px單位的尺寸，而後除以100轉換成rem單位後直接使用就能夠了

* 好比，在設計圖中測量一個元素的尺寸爲200px，那麼轉換成rem單位就是 200 / 100 = 2rem

document.documentElement.style.fontSize =

document.documentElement.clientWidth / 19.2 + 'px';

/**
* 移動端自適應，移動端必定要在頭 <head>標籤裏面加入這段標籤,以適應不一樣手機的視口
*/
<head>

</head>
// 
// 
// 
// 
// 
// 
//

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。