移动端适配——viewport

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