移动端屏幕自适应
1.rem:
rem(font size of the root element)是指相对于根元素的字体大小的单位
2.想法:
使用rem,字体大小与html标签的font-size属性相关,那么只要根据屏幕大小改变html标签的font-size属性,字体大小就与屏幕大小相关,就能使得移动端屏幕自适应
3.根据屏幕大小改变html标签的font-size属性:
使用单位vw,1vw === 1/10屏幕宽度,这样就可以根据屏幕大小改变html标签的font-size属性
4.px转rem:
设计图使用px为单位,难道要自己一个个去换算rem吗?使用postcss-pxtorem插件自动转换
npm install postcss-pxtorem --save-dev
在项目根目录新建postcss.config.js,参考配置如下:
module.exports = {
plugins: {
'autoprefixer': {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >&#