移动端适配问题（一步到位）

柔情只为你懂 2022-11-25 13:17 155阅读 0赞

## 移动端适配之间的准备工作 ##

## amfe-flexible 动态设置rem基准值 ##

1-安装配置的包npm I amfe-flexible  
2-安装后在入口文件中进行加载 import ‘amfe-flexible’ 动态设置rem的基准值

设置PX转换为rem \[行内样式不会进行转换为rem\]  
1安装 npm I postcss-poxtorem -D  
2进行配置 根目录下创建 .postcssrc.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70]  
具体的设置份数，需要根据UI的设计稿！，这里我以375PX的二倍图为例

## postCss的介绍 ##

一个处理CSS的工具，主要负责解析CSS代码，再交给插件进行处理，  
他的插件非常的丰富：比如自动适配浏览器的声明前缀，让你的CSS可以适配低版本的浏览器，PX转换为rem

postCSS不是单独自己使用的，而是和已有的构建工具进行集成， VUE-cli中集成了 autoprefixer插件

![在这里插入图片描述][20200809162044504.png]

## 移动端适配的问题 ##

移动端的适配问题  
**1：** 移动端手持设配的屏幕大小，屏幕密度都是不一样的，不可能为每一套设备写一套代码，自动去适配所有的设备，H5 小程序 原生APP开发都需要处理这个问题

**2：** 要想一套代码适配所有的型号手持设备，必须使用相对单位，CSS原生提供了VW VH。VW是把屏幕的宽度等分成了100份，1份就是1VW，对当前的屏幕视口高度份分100份，比如定义一个DIV，宽度为50VW，那么这个DIV就会占据设备宽度的一半，如果设备的宽度比较大，那么div就大一点，如果小的话,div宽度就小一些。

**3 ：** 当前的使用方案，rem相对单位，页面上的元素的宽高大小，间距，填充等都相对于页面的根元素，html的font-size他的大小，比如说对iPhone678的屏幕宽度375的设备，把font-size大小设置成37.5,那么此时的DIV（300X200）大小，在代码中他的定义就是\{width:8rem;height:6rem\}，这个时候就是相对于37.5这个基准值得到了div的宽度的相对值,  
所以在大屏幕的设备上rem基准值变大，div就会自动的变大，在小屏幕的设备上rem基准值变小，div就会自动的变小

4.具体的实现

4.1先去查看UI给的设计稿宽度（比如说：750PX 二倍的设计稿），我们可以根据自己的实际情况分成十份（20份）都可以，1份就是HTML的font-size的大小，它的rem就是这个单位的基准值  
4.2使用上一步的基准值，把设计稿中的宽高，填充，间距，字体大小，这些固定的PX单位，转换成rem的相对单位  
4.3再通过第三方的工具（amfe-flexible）或者自己根据当前屏幕视口的大小计算基准值，将计算出来的基准值，设置到html的font-size上，也就意味着改变HTML的大小

5 **比如针对720的设计稿**  
5.1查看设计稿的宽度是720，然后根据amfe-flexible这个工具将360的屏幕分成1份（1rem）是36px,反推将设计稿分成20份  
5.2针对设计稿中680x75的容器，使用基准的值。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70]: /images/20221124/e286742a912d4d4cb5a956d48db4cdc1.png
[20200809162044504.png]: /images/20221124/df300175fd4e486cbcde787a1427dc30.png