移动端适配方案

一、移动端适配方案

1.px单位固定单位 rem单位-相对单位 em-相对单位 vh-屏幕高度的100分之一 vw-屏幕宽度的一百分之一

2.屏幕查询

amfe-flexible.js

这个插件可以帮助我们自动把把当前的屏幕宽度都可以分成10份 其中设置1份为1rem

这个插件需要写rem单位 但是美工给的设计稿是px单位 那我们需要去计算、转换单位 这不利于编写和维护

所以我们需要一个插件 就是我们写的px单位 但是项目打包工程中 自动把px单位转为rem单位

vant2官网网址：Vant 2 - Mobile UI Components built on Vue

插件下载：

 

 

在和src平级的位置新建postcss.config.js文件 复制代码：

 

 二、不同单位的区别

px rem em vh vw的区别？

1.px是绝对单位

2.rem是一个相对单位 根据一个根字体大小来设置的

3.em也是一个相对单位  根据父节点的值设置大小

4.vh、vw 就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度

不同单位的区别及特点：说说em/px/rem/vh/vw的区别_em px rem vh_公孙元二的博客-CSDN博客