移动端前端适配方案

首先，谈一下目前为止出现的一些关于移动端适配的技术方案：

（1）经过媒体查询的方式即CSS3的meida queries

（2）以天猫首页为表明的 flex 弹性布局

（3）以淘宝首页为表明的 rem+viewport缩放

（4）rem 方式

1.Media Queries

meida queries 的方式能够说是我早期采用的布局方式，它主要是经过查询设备的宽度来执行不一样的 css 代码，最终达到界面的配置。核心语法是：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  /*你的css代码*/
}
复制代码

优势

• media query能够作到设备像素比的判断，方法简单，成本低，特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局

• 图片便于修改，只需修改css文件

• 调整屏幕宽度的时候不用刷新页面便可响应式展现

缺点

• 代码量比较大，维护不方便

• 为了兼顾大屏幕或高清设备，会形成其余设备资源浪费，特别是加载图片资源

• 为了兼顾移动端和PC端各自响应式的展现效果，不免会损失各自特有的交互方式

2.Flex弹性布局

以天猫的实现方式进行说明： 它的viewport是固定的

：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 
复制代码

高度定死，宽度自适应，元素都采用px作单位。

随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差很少，在哪一个宽度须要调整的时候使用响应式布局调调就行（好比网易新闻），这样就实现了『适配』。

3.rem布局

首先说一下，咱们想要达到的自适应效果是什么。很简单：元素、字体大小能随着屏幕大小（通常相对于宽度来讲）变化而变化，在大一点的屏幕上，尺寸大一些；在小一点的屏幕上，尺寸小一些；尺寸的大小和屏幕大小成正比。 最简单最直接的方案就是直接用百分比设置元素的尺寸。咱们用百分比设置元素大小能够实现元素尺寸的自适应，可是没法实现字体大小的自适应，并且尺寸转化为百分比计算很麻烦，还有就是元素尺寸的高很难相对屏幕宽度设置百分比。百分比适用于某种具体场景，不是通用解决方案。

其实咱们须要的是一个和屏幕宽度正相关的单位，并且这个单位要和px很容易互相转化。这样咱们就可使用这种单位进行元素尺寸和字体大小的设置。那么css中存在这种单位吗？答案是：不存在的。。。不过不要灰心，咱们能够借助rem来实现这种咱们须要的单位。

rem是一个相对单位，1rem等于html元素上字体设置的大小。咱们只要设置html上font-size的大小，就能够改变rem所表明的大小。这样咱们就有了一个可控的统一参考系。咱们如今有两个目标：

rem单位所表明的尺寸大小和屏幕宽度成正比，也就是设置html元素的font-size和屏幕宽度成正比 rem单位和px单位很容易进行换算，方便咱们按照标注稿写css

这里有一个前提，不管是设置html的font-size和屏幕宽度成正比，仍是换算单位，咱们都是以咱们的标注稿为参考的。移动端的标注稿通常是640px(iphone5)或者750px(iphone6/7/8),如今750px用的比较多一些，咱们假设标注稿是750px的。这里的750px是指设备的实际尺寸，也是UI标注稿的实际尺寸。而咱们编码写的px是指css尺寸，是设备无关的尺寸，css尺寸和屏幕实际尺寸不是1比1的映射关系，而是取决于屏幕的像素密度。好比iphoneX是3倍屏，iphone8是2倍屏，可是两个的屏幕css尺寸都是375px。而实际的设备尺寸，iphonex是1125px，iphone8是750px，咱们编码过程当中只须要设置css尺寸，设备会自动帮咱们映射实际的尺寸。咱们按照标注稿写完页面以后，页面应该是能够在其余全部尺寸设备上正常自适应地显示的。

rem单位所表明的尺寸大小和屏幕宽度成正比

首先，设置rem单位所表明的尺寸大小和屏幕宽度成正比，有3中方案,先没必要纠结其中的数值：

• 媒体查询, 设定每种屏幕对应的font-size

@media screen and (min-width:240px) {
    html, body, button, input, select, textarea {
        font-size:9px;
    }
}
@media screen and (min-width:320px) {
	html, body, button, input, select, textarea {
		font-size:12px;
	}
}
// 红米Note2
@media screen and (min-width:360px) {
	html, body, button, input, select, textarea {
		font-size:13.5px;
	}
}
@media screen and (min-width:375px) {
	html, body, button, input, select, textarea {
		font-size:14.0625px;
	}
}

复制代码

• js设置html的font-size大小

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';


复制代码

• 使用vw设置，vw也是一个相对单位，100vw等于屏幕宽度

html{
    font-size: 10vw;
}
复制代码

这3种方式，均可以设置html的font-size和屏幕宽度成正比。这3种的单位是css尺寸,不管第一种方法的min-width仍是第二种document.documentElement.clientWidth都是相对于设备的css尺寸而言，在iphonex和iphone8获得的结果都是375px。

第一种，须要设置须要每种屏幕都设置对应的font-size,这些font-size都是根据比例算出来的，比较繁琐，并且还有可能漏掉某些屏幕尺寸，不推荐。第二种用js设置，比较方便，如今大部分网站采用这种方式。第三种经过css的vw来设置，也很方便，并且不用写css，可是兼容性还不是特别好。综合推荐使用第二种。

单位换算

如今咱们要使用rem设置元素尺寸和字体大小。有两种思路：

• 设置特殊的html的font-size,使rem和标注稿上px容易换算，好比把咱们的html的font-size设置成1px，这样1rem就等于1px，由于咱们标注稿750px，是基于二倍屏的，1个css单位等于2个实际单位，因此咱们的font-size设置为0.5px，这样咱们设置尺寸时，rem和标注稿的px，就是1比1映射的。固然这里全部的大小都是相对于标注稿尺寸来讲的，若是是其余屏幕的尺寸，html的font-size确定要相应的变大或者变小，经过第二种js方法能够实现：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';
复制代码

• 经过css预编译或者webpack插件，实时计算 好比，咱们将html根元素设置为16px，标注稿上有一个div元素宽度为100px,咱们在scss中能够这样写

$rem: 32rem;

div{
	width: 100/$rem;
}
复制代码