移动端自适应

问题： 当前市场上手机屏幕宽度不尽相同，常见有320px（ipone5）、375px（ipone678）等等，而为了在不同宽度的手机屏幕上良好现显示网页，我们需要解决方案。

原理： 当前前端解决手机屏幕自适应的手段极多，究其原理，主要分为两大版块：

　　一、 使用百分比长度单位，当前百分比长度单位一般如下：vw、vh、vm、em、rem、%，优点： 一套css代码即可适应所有屏幕宽度不同的手机；

　　二、 使用固定长度单位px，再使用js根据当前屏幕宽度与固定宽度计算比例，进行网页缩放。优点： 网页宽度恒定，便于计算

实现：

一、 使用百分比宽度单位实现移动端屏幕自适应

****我们来聊聊这些百分比长度单位的定义及优缺点。

　　vw： 相对于视口的宽度，视口被均分为100单位的vw；即将当前屏幕宽度均分为100份，1vw即为当前屏幕宽度的1%；优点： vw单位长度准确分明，常用此单位，推荐使用此单位。

　　vh： 相对于视口的高度，视口被均分为100单位的vh；即将当前屏幕高度均分为100份，1vh即为当前屏幕高度的1%；基本不用此单位， 它的优点vw都有，但是它有一个致命的缺点：手机屏幕高度分成100份后，不是便于计算的数字，譬如iphone5屏幕高568px，此时1vh=5.68px；iphone678屏幕高667px，此时1vh=6.67px；若设计稿一个div宽高皆为100px，你能口算出它的宽高为多少vh吗？我们不可能带着计算器写代码。

　　vm： 相对于视口的宽度或高度，取决于哪个更小，视口宽度或高度中更小的那个被均分为100单位的vm；即将当前屏幕宽度或高度均分为100份，1vm即为当前屏幕宽度或高度的1%；它的优点vw都有，也曾见有人使用此单位，但我觉得vw比它更好。

　　em： 相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于上一个父元素的默认字体尺寸。举例而言，浏览器默认字体大小为16px，在css中设置

　　em将优先使用自身的字体大小，若自身没有设置字体大小，将继承上一个父元素的字体大小，此时没有为当前标签设置字体样式，于是继承body的字体大小，而不是继承html的字体大小，即1em=14px;此单位若要用于屏幕自适应，需与vw配合使用设置父元素的字体大小。于css中进行字体设置譬如：font-size1:4vw;，方可实现屏幕自适应。基本不用此单位， 它的优点rem都有，但它是优先使用自身的字体大小，其次继承上一个父元素的字体大小，而我们在使用标签时，经常需要给标签设置字体样式，将导致em的根元素字体尺寸不定，使用起来十分麻烦