1、rem
使用 rem 单位可以让设计更加灵活,能够控制元素整体放大缩小,而不是固定大小。rem单位基于 html 元素字体大小
,
2、适配工具
- lib-flexible
- postcss-px2rem-exclude
3、lib-flexible
- 安装lib-flexible:npm install lib-flexible --save
- 入口main.ts文件中引入lib-flexible:import ‘lib-flexible’
到此,我们已经算是完成移动端适配了;
我们先来看看lib-flexible
源码里做了什么骚操作;
是不是恍然大悟,原来源码里会设置html的font-size为屏幕宽度除以10,也就是说1rem等于html根节点的font-size
;
举个例子:一般我们的设计稿宽度(iPhone6)是750px,此时1rem就相当于75px;
这个时候你是不是就觉得可以了已经完美了,但是到你开发时你就会发现一个非常麻烦的点,设计稿给到我们的是px单位,但是我们在开发还要自己计算一下rem,又开始懵了。。。不过好在此时我们可以通过postcss-px2rem-exclude自动将css中的px转成rem
4、postcss-px2rem-exclude
- 安装postcss-px2rem-exclude:npm install postcss-px2rem-exclude --save
- 配置postcss.config.js文件如下:
配置里需要注意remUnit: 75
这配置;这个是和lib-flexible设置html的font-size为屏幕宽度除以10
要保持一致,不然会出现错乱,这里同样以宽度750px设计稿为标准设置的,不同的设计稿宽度对应不同的单位值。
完成以上步骤后,我们在开发时只需要将设计稿样式拷贝过来,就会自动转成rem适配。
⚠️注意点:
1、不需要进行转换rem的,在样式后面写上注释 /* no */
2、只能转换style中的css样式,不能转换script标签和元素里面css样式