Media Queries实现屏幕适配

通常我们会使用rem来进行适配，但rem的只能适配符合计算方法的尺寸，所以还需要media queries来配合使用

先看个适配Nexu 5X的例子：

@function toRem($px){
    $browser-default-font-size: 16px!default;
    @return $px / $browser-default-font-size * 1rem;
}
@media screen and (-webkit-min-device-pixel-ratio:3) and (width:414px)
{
    height: toRem（93px）;
}

使用Media Queries做适配时，用到两个数据，一是设备的尺寸（逻辑像素）二是缩放比例

开发时可以用chrome的工具来模拟不同的机型进行调试

接下来罗列一下安卓和ios常用的逻辑像素。

安卓常用的360×640（大部分720P及以上手机屏幕）、411×731（部分2K屏幕）等，基准设计稿就可以参考这些值啦。

设计稿一般都是按750来设计的，所以大部分ios没有问题，只需要再适配下大屏幕的

物理分辨率是硬件所支持的，逻辑分辨率是软件可以达到的。

Tips：

  
最终发现iPhone5和6一个小秘密，它们的比例是不变的

iPod设备

iPad设备