html5移动端页面适配方案分析

╰半橙微兮° 2022-04-15 02:30 418阅读 0赞

### 文章目录 ###

*  html5移动端适配
 *   *  前言
     *  vw适配方法
     *  zoom适配方法
     *  手淘flexible.js方法
     *  小结

# html5移动端适配 #

## 前言 ##

> 一直以来移动端适配问题困扰着众多前端开发者，因为众多移动端设备的分辨率不尽相同，导致做到完美适配十分困难，以下方法均为本人在项目开发中所采用的，并且能满足正常的开发需求，现在归纳总结一下，供各位参考。

## vw适配方法 ##

> 此方法使得任何页面在不同分辨率设备，所显示的内容均为一样，相当于等比例缩放。首先我们来看一下vw的兼容（vw和vh具体是什么东东在此就不解释了，如有不明白的请自行百度）

![vw浏览器兼容情况][vw]  
*作为移动端，可以放心大胆的使用vw。*  
为什么把此方法排在第一位，因为它够**简单粗暴**，拿来既用（需要搭配rem使用），不用考虑其他的任何东西。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70][]  
**重点来了**

1.  html页面设置meta标签(该标签在做移动端页面时不用说肯定都要加上，如果引用的开源代码可能会自动加上该标签，则不用手动添加)

1.  设置html元素的font-size属性

html {
    	font-size: (16 / 3.75) vw;
    }

解释一下这里面的参数具体是什么。  
（1）**16**，浏览器默认字体大小，这个无需过多解释；  
（2）**3.75** 目前大多数设计图分别有两个尺寸，640或者750，可能750占大多数（我们公司出的设计图为750），那我们就拿750尺寸作为参照，这样 3.75 == 1vw；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 1]  
（3）我们求得一个比率，然后我们根据这个比率，使用rem进行设置页面的宽高，字体的大小等。这时1rem == 16px；  
（4）但是我们页面里面的宽高px换算成rem太麻烦，比如高100px，宽200px ，如果手动进行计算再写入页面，那可能是一个噩梦，这个时候我们可以考虑css预处理器，这里我采用的是scss里面的函数。我写的有一个[scss语法入门][scss]，供各位参考。

1. 新建px转换为rem方法
    @function px2rem($px){
    	@return $px / 16 + rem;
    }
    2. 使用该方法 这里效果图里面是多少尺寸，就写多少尺寸，比如某元素字体大小为24px
    .aaa{
    	font-size: px2rem(24);
    }
    某div高度为100px
    .bbb{
    	height: px2rem(100);
    }

至此，vw适配法已经完成，此方法简单粗暴，不需要思考，拿来既用，能保证所有移动端设备所显示内容尺寸完美适配。

## zoom适配方法 ##

这个更**简单粗暴**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 2]

1.  设置meta标签
2.  在body后面加上该方法

function bodyScale() {
    	var deviceWidth = document.documentElement.clientWidth;
    	var scale = deviceWidth / 750;
    	document.body.style.zoom = scale;
    }
    bodyScale();

*  直接通过页面缩放，效果图多少尺寸，就在css里面写多少尺寸，不需要scss，不需要预处理器，什么都不需要！

## 手淘flexible.js方法 ##

> 这个是手机淘宝开源的适配方法

*  这个有时间再更…

## 小结 ##

> 萝卜白菜，各有所爱，以上为三种手机端适配方法，本人均在项目中使用过，目前未发现任何问题，看个人需求，选择适合自己项目的方法。前端道路尚未成功，同志仍需努力，共勉！

[vw]: /images/20220415/a7e89fee56a54deba3e9669dd8beffcc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70]: /images/20220415/03424543ca924d1e895c57e24fbf36f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 1]: /images/20220415/184ad8bbd87b4ec680be37b6e4bd2e55.png
[scss]: https://blog.csdn.net/jiang_fulai/article/details/80134663
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 2]: /images/20220415/2c25edf59eec478c8763c6a3ac48e0cd.png