移动端适配一

以iphone6为例
设备独立像素：375pt * 667 pt
dpr（物理像素 / 设备独立像素）： 2
物理像素： 750pt * 1334pt

在不同的屏幕上，CSS像素所呈现的物理尺寸是一致的，而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。

方案1

引用淘宝的flexible

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,miniumu-scale=1,user-scalable=no">

视口宽度为设备宽度，初始缩放比例为1，最大或最小也为1，不允许用户缩放

方案2

设置rem，1rem为屏幕宽度的1/10.需要做单位转换

方案3

vw、vh，将屏幕分成了100份，也需要做单位换算

方案4

flex

方案5

跨设备类型时（pc-pad-mobile）用媒体查询media

目前日常工作当中，视觉设计师给到前端开发人员手中的视觉稿尺寸一般是基于640px、750px以及1125px宽度为准。甚至为什么？大家应该懂的（考虑Retina屏）。