viewport适配
布局视口： layout viewport
视觉视口：visual viewport
完美视口：ideal viewport
当前缩放比=理想视口宽度/视觉视口宽度
实现viewport适配
<meta name="viewport" content="width=device-width,initial-scale=1.0">
device-width 映射的是视觉视口
把视觉视口的宽度赋值给width 【这里的width是网页的宽度，对应的是布局视口的大小】
width=device-width 【让布局视口和视觉视口大小相等，并且缩放比为1】
还可以使用第三方库实现
lib-flexible + px2rem-loader
1.安装lib-flexible.js； //基于vue-cli配置手淘的lib-flexible + rem，实现移动端自适应
2.安装px2rem-loader；//使用 webpack 的 px2rem-loader,自动将px转换为rem
3.在项目入口文件main.js中引入lib-flexible；//（import 'lib-flexible/flexible.js'）；
4.配置px2rem-loader
网友评论