集中適配方案的總結(jié): 項目: https://github.com/Aluka-w/mobile-terminal-adaptation

rem和vw布局

總結(jié):

1. 舊的rem布局

典型: lib-flexible: flex通過Hack手段來根據(jù)設(shè)備的dpr值相應(yīng)改變<meta>標(biāo)簽中viewport的值, 使得rem模擬vw的效果

2. 新的vw布局(我的demo里面并沒有解決兼容)

設(shè)計稿

1. 設(shè)計稿大多是750px * 1334px, css像素是750px, dpr=2, 基本按750布局即可

2. 設(shè)備像素比(dpr) ＝ 物理像素 / 設(shè)備獨立像素(css像素)

vh, vw(頁面可視寬度 + 滾動條)

參考: https://www.w3cplus.com/css/vw-for-layout.html

1. vw：是Viewport's width的簡寫,1vw等于window.innerWidth的1%

2. vh：和vw類似，是Viewport's height的簡寫，1vh等于window.innerHeihgt的1%

3. 視口被均分為100單位的vh, 既100vh就是滿屏高, 均等分可能出現(xiàn)像素偏差, 并且有兼容性

cssrem插件

1. 設(shè)置的cssrem.rootFontSize 這個參數(shù)是: 每次設(shè)置值都會除以這個參數(shù)返回的 值 + rem = 最后數(shù)值

2. 手淘團隊針對計算的問題, 有寫less或者sass的函數(shù)

第一不依賴框架

依賴cssrem這個插件(網(wǎng)易的做法)

demo: WY-mobile

1. 參考: https://www.cnblogs.com/well-nice/p/5509589.html

2. 第一步

    function initRem() {
        // 7.5基準(zhǔn)值:  設(shè)計稿寬度 / 100 = 基準(zhǔn)值
        var deviceWidth = document.documentElement.clientWidth;
        // 當(dāng)大于750時候就按照750寬度計算
        if(deviceWidth > 750) deviceWidth = 750;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
    }
    initRem();
    window.addEventListener("resize", function () {
        initRem();
    });

2. 第二步

    設(shè)置： ```cssrem.rootFontSize = 100 ```, 即設(shè)計稿的值都除以100即可
   

3. 第三步

    height的設(shè)置需要注意, 可能填不滿
   

4. 第四步:

      這種方案下, 不想使用rem, 那就直接用px即可
   

手淘團隊的lib-flexible方案(vue中也有)

demo: ali-mobile

1. 與網(wǎng)易團隊的區(qū)別: 手淘動態(tài)增加meta標(biāo)簽, 動態(tài)計算dpr, 兼容更多的屏 demoa: ali-mobile

2. 參考: https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

3. 步驟:

   1. 引入lib-flexible(或者直接引入)

   `<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>`
   

   2. 刪除meta標(biāo)簽

   <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

   3. cssrem的設(shè)置

      cssrem的cssrem.rootFontSize = 75, 就可以了

   4. 這種方案下, 不想使用rem, 那就直接用px即可

依賴cssrem這個插件(博客)

demo: normal-mobile

1. 第一步

  ;(function(win, doc){
  function fontSizeModify() {
    var idealWidth = doc.documentElement.clientWidth,
      htmlEle = doc.children[0];
      fontSize   = 32 * idealWidth/750;
      // 當(dāng)寬度大于600時, font-size保持不變
      // if (idealWidth >=600) {
      //   fontSize = 32 * 600/750;
      // }
    htmlEle.style.fontSize = fontSize + "px";
  }
  function throttle(method, content) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function() {
      method.call(content);
    }, 100);
  }
  fontSizeModify();
  win.addEventListener("resize", function(){
    throttle(fontSizeModify);
  });
})(this, document);

2. 第二步

設(shè)置： cssrem.rootFontSize = 32, 因為乘以了32的原因

3. 這種方案下, 不想使用rem, 那就直接用px即可

第二, Vue-cli的手機適配

px轉(zhuǎn)rem(手淘團隊的lib-flexible)demo: vue-normal

1. 參考: https://blog.csdn.net/qq_22844483/article/details/79730604

2. 步驟:

3. npm install lib-flexible --save

4. 在main.js引入 import 'lib-flexible/flexible.js'

5. 把項目根目錄的index.html 頭部刪除自動生成的meta標(biāo)簽, lib-flexible會根據(jù)屏幕自動生成相對于的meta標(biāo)簽

6. 安裝 npm install px2rem-loader --save-dev 把px轉(zhuǎn)成rem

7. 修改build/utils.js, 在cssLoader變量中

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      importLoader: 5 // 在加載cssLoader之前加載的loader個數(shù)
    }
  }
const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    emUnit: 75 // 設(shè)計稿的1/10
  }
}
function generateLoaders(loader, loaderOptions) {
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]   // 注釋的地方是需要加的
  if (loader) {
    loaders.push({
      loader: loader + '-loader',
      options: Object.assign({}, loaderOptions, {
        sourceMap: options.sourceMap
      })
    })
  }
}

6. 關(guān)于px2rem(保留px方案)

   1. 直接寫px，編譯后會直接轉(zhuǎn)化成rem
   2. 在px后面添加/no/，不會轉(zhuǎn)化px，會原樣輸出。 — 一般border需用這個
   3. 在px后面添加/px/,會根據(jù)dpr的不同，生成三套代碼。---- 一般字體需用這個

7. 之后直接根據(jù)設(shè)計稿寫就行

px轉(zhuǎn)成vw(重在學(xué)習(xí)) demo: vue-mobile

1. 參考網(wǎng)址: https://www.w3cplus.com/mobile/vw-layout-in-vue.html

2. demo: vue-mobile

3. 缺點: 兼容性較差

4. 實現(xiàn)步驟:

5. 安裝依賴: npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

6. 在根目錄.postcssrc.js中, 對新安裝的PostCSS插件進行配置

  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // "autoprefixer": {}, // 因為postcss-cssnext, cssnano都有類似功能
    "postcss-aspect-ratio-mini": {}, // 處理元素容器寬高比, 感覺像scss的繼承, 沒什么卵用
    "postcss-write-svg": { // 處理移動端1px的解決方案
      utf8: false 
    }, 
    "postcss-cssnext": {}, // 該插件可以讓我們使用CSS未來的特性，其會對這些特性做相關(guān)的兼容性處理
    "postcss-px-to-viewport": { // 主要用來把px單位轉(zhuǎn)換為vw、vh、vmin或者vmax
      viewportWidth: 750, // 視窗的寬度，對應(yīng)的是我們設(shè)計稿的寬度，一般是750 
      viewportHeight: 1334, // 視窗的高度，根據(jù)750設(shè)備的寬度來指定，一般指定1334，也可以不配置 
      unitPrecision: 3, // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)（很多時候無法整除） 
      viewportUnit: 'vw', // 指定需要轉(zhuǎn)換成的視窗單位，建議使用vw 
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不轉(zhuǎn)換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個通用的類名 
      minPixelValue: 1, // 小于或等于`1px`不轉(zhuǎn)換為視窗單位，你也可以設(shè)置為你想要的值 
      mediaQuery: false // 允許在媒體查詢中轉(zhuǎn)換`px`
    }, 
    "cssnano": {  // 主要用來壓縮和清理CSS代碼
      preset: "advanced", 
      autoprefixer: false, // 插件是用來自動處理瀏覽器前綴的一個插件, 重復(fù)調(diào)用, postcss-cssnext已經(jīng)有了
      "postcss-zindex": false // 啟用了這個插件，z-index的值就會重置為1。這是一個天坑
    }
  }

4. 保留px方案

通過添加類名, .ignore, 可以配置

5. 之后直接根據(jù)設(shè)計稿寫就行

第三, create-react-app搭配webpack做適配(事實上還是webpack)

px轉(zhuǎn)rem(手淘團隊的lib-flexible) demo: react-normal

1. 參考: https://blog.csdn.net/zhuming3834/article/details/84319296

2. 步驟:

   1. 安裝cnpm i lib-flexible postcss-px2rem

   2.找到node_modules/react-scripy/config/webpack.config.dev.js

const px2rem = require('postcss-px2rem');

const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
  require.resolve('style-loader'),
  {
    loader: require.resolve('css-loader'),
    options: cssOptions,
  },
  {
    loader: require.resolve('postcss-loader'),
    options: {
      ident: 'postcss',
      // 這些是配置rem的
      plugins: () => [
        require('postcss-flexbugs-fixes'),
        require('postcss-preset-env')({
          autoprefixer: {
            flexbox: 'no-2009',
          },
          stage: 3,
        }),
        px2rem({remUnit: 75})  // 這里表示 75px = 1rem
      ],
    },
  },
  {
    loader: require.resolve('less-loader') // compiles Less to CSS
  }
];
if (preProcessor) {
  loaders.push(require.resolve(preProcessor));
}
return loaders;
};

3. 找到node_modules/react-scripy/config/webpack.config.prod.js

  plugins: () => [
  require('postcss-flexbugs-fixes'),
  require('postcss-preset-env')({
    autoprefixer: {
      flexbox: 'no-2009',
    },
    stage: 3,
  }),
  px2rem({remUnit: 75})
],

4. 在index.js中引入import 'lib-flexible'

5. 之后直接根據(jù)設(shè)計稿寫就行

px轉(zhuǎn)vw(手淘推出的vw布局) demo: react-mobile

1. 參考: https://go.ctolib.com/article/wiki/82279

2. 步驟: 有點尷尬, 沒配置出來, demo沒有用