1. 媒体查询（廉颇老矣，尚能饭）
@media screen and (min-width: 375px){
html {
font-size: 14.0625px;
}
}
@media screen and (min-width: 360px){
html {
font-size: 13.5px;
}
}
@media screen and (min-width: 320px){
html {
font-size: 12px;
}
}
html {
font-size: 16px;
}
能针对优化，但是屏幕尺寸太多，导致一些屏幕看起来不是那么合适，有点生硬。内容的弹性自适应只会在临界点的时候，突然变化。
2. 百分比（廉颇老矣，尚能饭）
确定高度，宽度使用百分比，这样屏幕宽度变大的话，内容宽度也会随之变大。能适应一般的情况。
3. flex弹性布局
div {
display: flex;
}
4. rem + viewport（比较成熟的方案）
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximumu-scale=1.0,user-scaleable=no">
width 网页内容宽度等于设备宽度，把理想的视窗宽度设置为设备宽度
initial-scale 初始缩放比例，能起到 width=device-width 的作用
minimum-sacle 最小缩放比例
maximum-scale 最大缩放比例
user-scaleable 用户能否进行缩放操作，yes/no
dpr（device pixel ratio）[设备像素比 = 设备像素 / 设备独立像素]
一个物理(设备)像素是显示器（手机屏幕）上最小的物理显示单元，在OS的调度下，每一个设备像素都有自己的颜色值和亮度值。
设备独立像素 （也叫目睹无关像素），也可以认为是计算机坐标系中的一个点，这个点代表一个可以由程序使用的虚拟像素（css像素），然后相关系统转换为物理像素。
像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。
dpr = 1的时候，css的1个像素点 ，对应一个物理像素点。
dpr = 2的时候，css的1个像素点，对应4个物理像素点，为什么是4个呢，因为宽对应是2倍，高也对应是2倍。
dpr = 3，css的1个像素点，对应9个像素点。
dpr > 1， 会带来图片会模糊的问题，原理可以想象，一瓶蓝墨水，如果混合在4倍的容器里面，颜色是不是会比较浅。1px边框也是个问题，这个可以用伪元素 + transform ，scale:0.5 来解决。
对于rem + viewport方案，html的font-szie大小，一般为窗口大小的0.1倍，或者设计稿的0.1倍，然后动态设置viewport；
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
布局的时候，各元素css尺寸 = 设计稿标注尺寸 / 设计稿横向分辨率 / 10；
font-size可能需要额外的媒体查询，并且font-size不用rem；
有最大临界点，比如物理分辨率大于1080，可以访问电脑端网页。
搭配less或者sass会更好用
//定义一个变量和一个mixin
@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
@{name}: @px / @baseFontSize * 1rem;
}
//使用示例：
.container {
.px2rem(height, 240);
}
//less翻译结果：
.container {
height: 3.2rem;
}
其实可以参考阿里的 lib-flexible
5. vw, vh移动端设配新贵（设备版本 > android 4.3）
1vw表示1%的屏幕宽度，同理1vh也表示1%的屏幕高度。
可以通过caniuse网站查询vw适配情况，android版本 > 4.4的都支持，ios支持比较好。
a. 所有布局都使用vw，vh来做单位
设计稿 750px === 100vw
$vw_base: 750;
@function vw($px) {
@return ($px / 750) * 100vw;
}
b. 沿用rem单位，vw只用于html的font-size上面，这样可以避免使用js来动态计算根元素字体大小。用sass计算
// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
@return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vw_design: 750;
html {
font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; //就是相当于20vw
// 同时，通过Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
max-width: 540px;
min-width: 320px;
}
这部分代码参考了利用视口单位实现适配布局 | Aotu.io「凹凸实验室」
如果是用calc来计算，比如
html{
font-size: calc(16px + 2 * (100vw - 375px) / 225);
}
要注意，Safari不支持这样，不过它支持将字体大小相对于10px的百分比的计算，如
html{
font-size: calc(100% + 2 * (100vw - 375px) / 225);
}
此处可查看基于vw等viewport视区单位配合rem响应式排版和布局 获得更详细的信息。
