描述
做移动端的项目，最重要的是做适配相关的工作，移动设备的屏幕是有大有小，大到平板，也是说我们的页面内容是不能固定死的，要根据屏幕的大小进行等比的放大和缩小，本文所讲的是参照手淘使用的方案lib-flexible自适应，用单位rem来做适配，lib-flexible插件会自动根据屏幕的大小来动态的设置根html的大小，只有html设置了rem。
相关插件：
1.lib-flexible(手淘)：实现动态修改根html的大小
2.postcss-pxtorem：把项目中的px转为rem
也有人会用白百分比
有的人会用百分比的来做，其实百分比有点类似于rem,百分比相对于父元素的大小，而rem是相对根元素的大小，用百分比不利于元素大小转换，每个元素的宽高和字体都要人工去算，而且并不精准，
例如设计稿的大小通常是675/667的屏幕大小进行设计的， 设计稿上设计的元素宽高为40px50px，字体为16px，如果用百分比要算675/667的大小的屏的显示，正好是宽高为40px50px，字体为16px，这个才是百分百还原设计稿的流程，也许用百分比来布局，可以起到不同屏幕大小下可以进行等比例缩放，但是在675*667的屏幕下跟设计稿比很难做到准确，所以不推荐，
总结
- 每写一个元素都要人工手动去算，比较麻烦
- 在设计搞的屏幕下很难一 一对应大小，不准确，只能说是差不多，实现出来的同一个元素大小看是不是设计稿上的大小就知道了
3.一般做响应式网站用，做app或h5不适用，做app或h5的这些项目精确度较高，不能是差不多，要从百分百还原设计稿出发
了解rem布局原理
假如我们不用手淘插件会自动转换html元素的大小，人工如何配置实现相应效果呢？
我门知道元素用rem是一个相对单位，是根据html的字体大小来改变样式的大小。
当html的fontSize设置100px后，下面的元素如果用1rem,那么会自动换为1*100px,这是关于rem的相对大小的解释。这是屏幕固定的情况下的这样设置，那如何区分屏幕呢，那么这里要引申另外一个概念叫vw,要实现适配就是rem+vw的适配方案。
了解rem+vw布局方案
我们知道每个屏幕都是100vw的宽，它也是个相对大小，那我们可以设置html的fontSize的大小为vw,这样就可以根据不同屏幕放大缩小了，但是换算后怎么具体到设计稿的大小呢。假如定fontSize的大小为100px，就有如下推导公式:
100px占了375的屏宽是多少比值，那么相应的就能得到所占vw的比值是多少，从而得出应该给html设置多少vw，这力取值为100px,是方便子孙元素给值得计算，通过公式计算得出的vw为26.66vw,设置样式如下：
这样设置之后的结果，在375的屏幕下，看到设计搞上宽高分别为100px/200px的效果一样
这里我在页面中直接设置元素宽高为1rem/2rem,自动换算成100px/200px,有一点点误差请忽略，是因为给html计算fontSize时的vw换算没有整除，我们可以切换到其他宽度的屏幕看下效果，看有没有放大或者缩小
注意：
*：开发就在宽375的屏幕下做开发，这样实现的元素宽高就和设计稿保持一致了，设计稿只有固定的一个
尺寸，而真实的环境宽度屏却不只有一个，只要保证设计稿尺寸的那个屏下的所有元素宽高一样，其
他屏幕显示随着屏大小等比缩放，这个也是科学实现的。如果看到移动端切换不同大小屏幕，元素大
小没有变化，或者对应尺寸的屏显示的大小跟设计稿不一致，很多人没有搞懂，做出来的只能说差不多
能看，没有百分百还原设计稿，都是给个差不多的大小，，就暗自笑呵呵吧，投以鄙视的眼光。
以上通过rem+vw的方式解释了适配的原理，接下来我们可以偷个懒，用插件自动把px转为rem
在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转为rem的插件
npm i -S lib-flexible //动态设置html的fontSize的插件
- 创建webpack.config.js文件（文件夹跟angular.json同级）
module.exports = {
module: {
rules: [{
test: /\.(scss|css|less)$/,
use: [
'postcss-loader',
'less-loader',
]
}]
}
};
3.创建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内容
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插件
当设置div的宽高为100px/200px,我们在375的屏(设计稿尺寸屏)，看是不是对应的大小
···
当我们切换不同宽度屏幕时看下效果，例如切到pad
从图中看出来，项目中我们用的单位还是px,设计图上看到的尺寸是多少px，就设置多少px,只不过我们配置好的postcss-pxtorem插件会自动帮我们转成rem单位，当我们切换不同屏幕时候，此时的lib-flexible插件会起作用，自动转换根html的fonfSize的大小，此时项目中的px也都转换成了rem,就会随根html的fontSize大小变化而变化，这样的设计也是科学的。
注意：
有一点需要注意，假如我们有用到第三方移动端UI库组件，该出现如何问题呢，这里做适配，很多人都没有留意这里的问题，移动端UI库组件只是给你设计好了样式，和功能交互，并没有做适配，不妨可以找几个移动端组件看看，切换不同屏幕时，它的元素大小无任何变化，这是做移动端很多人没弄清楚的地方，只是做了个差不多的效果，跟设计稿百分百还原的前提，差别很大。那么上面已经总结了如何适配我们自己写的组件，会自动帮我们转rem,那能不能也把移动端组件库中自带的px单位也转成rem呢，答案是可以的。
在postcss.config.js中修改要转换的文件
利用这个exclude属性设置需要转换的文件，可以用正则表示，默认值是false,所有的都转
配置后很明显的发现使用的UI库中的组件默认已经转成rem,说明配置成功。
总结
移动端之所以要适配，是因为设计图只有一种尺寸，也就是说这个设计图只设计一种尺寸的屏幕，前端开发也只需要针对设计图相同尺寸的屏幕做开发，且实现的效果接近百分百还原设计搞，保持这一种屏幕相同且实现元素大小也和设计稿相同就行，然后保证其他和设计稿尺寸不同屏幕下切换时，能等比例的缩放就行，例如平板看到的大小肯定要比手机屏幕要大，因为屏幕变大了，内容肯定要变大，这就是为啥要做移动端，很多人都不懂这里面的沟沟坎坎，这都是很基础的常识性业务了，不然闹笑话。
