描述

做移動端的項目橡淆，最重要的是做適配相關(guān)的工作榆纽，移動設(shè)備的屏幕是有大有小，大到平板芬探，也是說我們的頁面內(nèi)容是不能固定死的神得，要根據(jù)屏幕的大小進(jìn)行等比的放大和縮小，本文所講的是參照手淘使用的方案lib-flexible自適應(yīng)偷仿，用單位rem來做適配哩簿，lib-flexible插件會自動根據(jù)屏幕的大小來動態(tài)的設(shè)置根html的大小，只有html設(shè)置了rem酝静。
相關(guān)插件：
1.lib-flexible(手淘)：實現(xiàn)動態(tài)修改根html的大小
2.postcss-pxtorem：把項目中的px轉(zhuǎn)為rem

也有人會用白百分比

有的人會用百分比的來做节榜，其實百分比有點類似于rem,百分比相對于父元素的大小，而rem是相對根元素的大小别智，用百分比不利于元素大小轉(zhuǎn)換宗苍，每個元素的寬高和字體都要人工去算，而且并不精準(zhǔn)薄榛，
例如設(shè)計稿的大小通常是675/667的屏幕大小進(jìn)行設(shè)計的讳窟， 設(shè)計稿上設(shè)計的元素寬高為40px50px，字體為16px敞恋，如果用百分比要算675/667的大小的屏的顯示丽啡，正好是寬高為40px50px，字體為16px硬猫，這個才是百分百還原設(shè)計稿的流程补箍，也許用百分比來布局，可以起到不同屏幕大小下可以進(jìn)行等比例縮放啸蜜，但是在675*667的屏幕下跟設(shè)計稿比很難做到準(zhǔn)確坑雅，所以不推薦，
總結(jié)

1. 每寫一個元素都要人工手動去算衬横，比較麻煩
2. 在設(shè)計搞的屏幕下很難一 一對應(yīng)大小裹粤，不準(zhǔn)確，只能說是差不多冕香，實現(xiàn)出來的同一個元素大小看是不是設(shè)計稿上的大小就知道了
   3.一般做響應(yīng)式網(wǎng)站用蛹尝，做app或h5不適用后豫，做app或h5的這些項目精確度較高悉尾，不能是差不多突那，要從百分百還原設(shè)計稿出發(fā)

了解rem布局原理

假如我們不用手淘插件會自動轉(zhuǎn)換html元素的大小，人工如何配置實現(xiàn)相應(yīng)效果呢构眯？
我門知道元素用rem是一個相對單位愕难，是根據(jù)html的字體大小來改變樣式的大小。

image.png

當(dāng)html的fontSize設(shè)置100px后惫霸，下面的元素如果用1rem,那么會自動換為1*100px,這是關(guān)于rem的相對大小的解釋猫缭。這是屏幕固定的情況下的這樣設(shè)置，那如何區(qū)分屏幕呢壹店，那么這里要引申另外一個概念叫vw,要實現(xiàn)適配就是rem+vw的適配方案猜丹。

了解rem+vw布局方案

我們知道每個屏幕都是100vw的寬，它也是個相對大小硅卢，那我們可以設(shè)置html的fontSize的大小為vw,這樣就可以根據(jù)不同屏幕放大縮小了射窒，但是換算后怎么具體到設(shè)計稿的大小呢。假如定fontSize的大小為100px将塑，就有如下推導(dǎo)公式:

image.png

100px占了375的屏寬是多少比值脉顿，那么相應(yīng)的就能得到所占vw的比值是多少，從而得出應(yīng)該給html設(shè)置多少vw点寥，這力取值為100px,是方便子孫元素給值得計算艾疟，通過公式計算得出的vw為26.66vw,設(shè)置樣式如下：

image.png

image.png

這里我在頁面中直接設(shè)置元素寬高為1rem/2rem,自動換算成100px/200px,有一點點誤差請忽略蔽莱，是因為給html計算fontSize時的vw換算沒有整除，我們可以切換到其他寬度的屏幕看下效果戚长，看有沒有放大或者縮小

image.png

在angular中安裝配置postcss-pxtorem lib-flexible 移動端適配

1.安裝必要的依賴

npm i -D @angular-builders/custom-webpack // 在angular中webpack自定義配置必須要裝的插件
npm i @angular-devkit/build-angular -D 
npm install postcss-pxtorem --save-dev //自動把px轉(zhuǎn)為rem的插件
npm i -S lib-flexible   //動態(tài)設(shè)置html的fontSize的插件

2. 創(chuàng)建webpack.config.js文件（文件夾跟angular.json同級）

module.exports = {
  module: {
    rules: [{
      test: /\.(scss|css|less)$/,
      use: [
        'postcss-loader',
        'less-loader',
      ]
    }]
  }
};

3.創(chuàng)建postcss.config.js文件（文件夾跟angular.json同級）

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 7'],
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ],
    },
    'postcss-pxtorem': {
      rootValue: 37.5, // 這個建議37.5
      exclude: false,
      propList: ['*']
    }
  }
}

4.修改angular.json內(nèi)容
projects.architect.build中覆蓋builder

 "builder":"@angular-builders/custom-webpack:browser"

projects.architect.build.options中加入代碼

 "customWebpackConfig": {
 "path": "./webpack.config.js",
  "mergeStrategies": {
    "module.rules": "append"
  },
  "replaceDuplicatePlugins": true
}

projects.architect.serve中覆蓋builder

 "builder":"@angular-builders/custom-webpack:dev-server"

5.在main.ts中引入lib-flexible插件

image.png

當(dāng)設(shè)置div的寬高為100px/200px,我們在375的屏(設(shè)計稿尺寸屏)，看是不是對應(yīng)的大小
···

image.png

當(dāng)我們切換不同寬度屏幕時看下效果悠垛，例如切到pad

image.png

從圖中看出來线定，項目中我們用的單位還是px,設(shè)計圖上看到的尺寸是多少px，就設(shè)置多少px,只不過我們配置好的postcss-pxtorem插件會自動幫我們轉(zhuǎn)成rem單位确买，當(dāng)我們切換不同屏幕時候斤讥，此時的lib-flexible插件會起作用，自動轉(zhuǎn)換根html的fonfSize的大小湾趾，此時項目中的px也都轉(zhuǎn)換成了rem,就會隨根html的fontSize大小變化而變化芭商，這樣的設(shè)計也是科學(xué)的。

注意：
有一點需要注意撑帖，假如我們有用到第三方移動端UI庫組件蓉坎，該出現(xiàn)如何問題呢，這里做適配胡嘿，很多人都沒有留意這里的問題蛉艾，移動端UI庫組件只是給你設(shè)計好了樣式，和功能交互衷敌，并沒有做適配勿侯，不妨可以找?guī)讉€移動端組件看看，切換不同屏幕時缴罗，它的元素大小無任何變化助琐，這是做移動端很多人沒弄清楚的地方，只是做了個差不多的效果面氓，跟設(shè)計稿百分百還原的前提兵钮，差別很大。那么上面已經(jīng)總結(jié)了如何適配我們自己寫的組件舌界，會自動幫我們轉(zhuǎn)rem,那能不能也把移動端組件庫中自帶的px單位也轉(zhuǎn)成rem呢掘譬，答案是可以的。
在postcss.config.js中修改要轉(zhuǎn)換的文件

image.png

利用這個exclude屬性設(shè)置需要轉(zhuǎn)換的文件呻拌，可以用正則表示葱轩，默認(rèn)值是false,所有的都轉(zhuǎn)

image.png

總結(jié)

移動端之所以要適配，是因為設(shè)計圖只有一種尺寸靴拱，也就是說這個設(shè)計圖只設(shè)計一種尺寸的屏幕垃喊，前端開發(fā)也只需要針對設(shè)計圖相同尺寸的屏幕做開發(fā)，且實現(xiàn)的效果接近百分百還原設(shè)計搞袜炕，保持這一種屏幕相同且實現(xiàn)元素大小也和設(shè)計稿相同就行本谜，然后保證其他和設(shè)計稿尺寸不同屏幕下切換時，能等比例的縮放就行妇蛀，例如平板看到的大小肯定要比手機(jī)屏幕要大耕突，因為屏幕變大了笤成，內(nèi)容肯定要變大评架，這就是為啥要做移動端，很多人都不懂這里面的溝溝坎坎炕泳，這都是很基礎(chǔ)的常識性業(yè)務(wù)了纵诞，不然鬧笑話。