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