前端适配：移动端/web端适配方案

科普：

动态适配，实际上是指在须要适配的地方进行适配处理，而不是全局的，全部的元素都进行适配处理；

rem

rem是CSS3新增的一个相对单位（root em，根em）这个单位与em有什么区别呢？
区别在于
1.使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
2.这个单位可谓集相对大小和绝对大小的优势于一身，经过它既能够作到只修改根元素就成比例地调整全部字体大小，又能够避免字体大小逐层复合的连锁
3.除了IE8及更早版本外，全部浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。
这些浏览器会忽略用rem设定的字体大小。好比：p{font-size:14px;font-size:0.875rem;}

(推荐一个单位转换的工具：http://pxtoem.com/)
复制代码

1.经过媒体查询的方式：css3的media queries

media queries :主要经过查询不一样的宽度来执行不一样的css代码，最终以达到界面的配置。
核心语法：
@media screen and(max-width:600px){
	/**
		*/
	html{
	 font-size:32px;
	}
}
复制代码

优势：

• media query 能够作到设备像素比的判断，方法简单，成本较低，特别是对于PC端和移动端维护同一套代码的时候；Bootstrap框架就是使用这种方式布局；
• 调整屏幕宽度的时候，不须要刷新页面便可响应；
• 图片便于修改，只须要修改CSS文件；

缺点：

• 代码量大，维护不方便 -为了兼顾大屏幕或高清设备，会形成其余设备资源浪费，特别是加载图片资源
• 为了兼顾移动端和PC端各自响应式的展现效果，不免会损失各自特有的交互方式

2.淘宝触屏版以flex弹性盒子布局,实现移动端适配：

以淘宝触屏版首页为表明的flex弹性布局+width:100%百分比单位；不须要适配的地方仍然是px单位；

如下为例： 淘宝网触屏版

在iphone6/7/8 下： 底部tab栏，position:fixed定位；display:flex;盒子布局；flex-direction:row;justify-content:space-between;

在iPad下： 在中间分类栏：以position:absolute;display:flex;flex-direction:column;弹性盒子

京东商城的开发团队一样也使用了移动端/web端相同的适配布局方式：京东开发团队

在我我的看来，flex弹性盒子布局，以其灵活方便的优点，在适配布局上占据了一席主流地位；flex+vw的布局方式/flex+百分比的布局方式更受前端开发者的欢迎

3.的rem+viewport缩放

根据屏幕宽度设定rem值，须要适配的元素都使用rem单位，不须要适配的元素仍是使用px单位。1em=16px;
复制代码

实现原理：

1.根据rem将页面放大dpr倍, 而后viewport设置为1/dpr.

如iphone6 plus的dpr为3, 则页面总体放大3倍, 
1px(css单位)在plus下默认为3px(物理像素) 

而后viewport设置为1/3, 这样页面总体缩回原始大小. 从而实现高清。
复制代码

这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。 这个device-width的计算公式为：设备的物理分辨率/(devicePixelRatio * scale)， 在scale为1的状况下，device-width = 设备的物理分辨率/devicePixelRatio 。