现在做大屏的需求越来越多,大屏的适配是个头疼的事情
一、基于rem的适配方案
rem是什么?
rem是指相对于根元素的字体大小的单位,在日常开发过程中我们通常把根元素(html/body)的字体设置为10px,方便于我们计算(此时子元素的1rem就相当于10px)。
适用场景
不固定宽高比的Web应用,适用于绝大部分业务场景
项目实战
-
安装依赖
npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev
postcss-pxtorem 是PostCSS的插件,用于将像素单元生成rem单位 autoprefixer 浏览器前缀处理插件 amfe-flexible 可伸缩布局方案 替代了原先的
lib-flexible
选用了当前众多浏览器兼容的viewport
-
项目根目录创建
postcss.config.js
文件
module.exp