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

html5移动端适配

前言

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

vw适配方法

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

作为移动端，可以放心大胆的使用vw。
为什么把此方法排在第一位，因为它够简单粗暴，拿来既用（需要搭配rem使用），不用考虑其他的任何东西。

重点来了

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

<meta name = 'viewport' content = 'width = device-width,initial-scale = 1,minimum-scale = 1, maximum-scale = 1, user-scalable = no'/>

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

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

解释一下这里面的参数具体是什么。
（1）16，浏览器默认字体大小，这个无需过多解释；
（2）3.75 目前大多数设计图分别有两个尺寸，640或者750，可能750占大多数（我们公司出的设计图为750），那我们就拿750尺寸作为参照，这样 3.75 == 1vw；

（3）我们求得一个比率，然后我们根据这个比率，使用rem进行设置页面的宽高，字体的大小等。这时1rem == 16px；
（4）但是我们页面里面的宽高px换算成rem太麻烦，比如高100px，宽200px ，如果手动进行计算再写入页面，那可能是一个噩梦，这个时候我们可以考虑css预处理器，这里我采用的是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适配方法

这个更简单粗暴

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方法

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

• 这个有时间再更…

小结

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