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没有问题，只需要再适配下大屏幕的

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

代数	设备	操作系统	逻辑分辨率(point)	物理分辨率(pixel)	屏幕尺寸(对角线长度)	缩放因子
	iPhone
第六代	iPhone 5	iOS 6	320 x 568	1136 x 640	4.0寸	2x
第七代	iPhone 5S/5C	iOS 7	320 x 568	1136 x 640	4.0寸	2x
第八代	iPhone 6	iOS 8	375 x 667	1334 x 750	4.7寸	2x
第八代	iPhone 6 Plus	iOS 8	414 x 736	2208 x 1242 (1920x1080)	5.5寸	3x
第九代	iPhone 6S	iOS 9	375 x 667	1334 x 750	4.7寸	2x
第九代	iPhone 6S Plus	iOS 9	414 x 736	2208 x 1242 (1920x1080)	5.5寸	3x
	iPhone SE	iOS 9	320 x 568	1136 x 640	4寸	2x
第十代	iPhone 7	iOS 10	375 x 667	1334 x 750	4.7寸	2x
第十代	iPhone 7 Plus	iOS 10	414 x 736	2208 x 1242 (1920x1080)	5.5寸	3x
第十一代	iPhone 8	iOS 11	375 x 667	1334 x 750	4.7寸	2x
第十一代	iPhone 8 Plus	iOS 11	414 x 736	2208 x 1242 (1920x1080)	5.5寸	3x
第十一代	iPhone X	iOS 11	375 x 812	2436 × 1125	5.8寸	3x

Tips：

机型	屏幕宽高比
iPhone 5	320÷568=0.563
iPhone 6	375÷667=0.562
iPhone 6 Plus	414÷736=0.5625

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

---

iPod设备

设备	操作系统	物理分辨率(pixel)	屏幕尺寸(对角线长度)	缩放因子
iPod Touch 1	iOS 1	480 x 320	3.5寸	1x
iPod Touch 2	iOS 2	480 x 320	3.5寸	1x
iPod Touch 3	iOS 3	480 x 320	3.5寸	1x
iPod Touch 4	iOS 4	960 x 640	3.5寸	2x
iPod Touch 5	iOS 6	1136 x 640	4.0寸	2x
iPod Touch 6	iOS 8	1136 x 640	4.0寸	2x

---

iPad设备

设备	操作系统	物理分辨率(pixel)	屏幕尺寸(对角线长度)	缩放因子
iPad 1	iOS 3	1024 x 768	9.7寸	1x
iPad 2	iOS 4	1024 x 768	9.7寸	1x
iPad 3 (The New iPad)	iOS 5	2048 x 1536	9.7寸	2x
iPad 4	iOS 6	2048 x 1536	9.7寸	2x
iPad Air	iOS 7	2048 x 1536	9.7寸	2x
iPad Air 2	iOS 8	2048 x 1536	9.7寸	2x
iPad Pro	iOS 9	2048 x 1536	9.7寸	2x
iPad (第五代)	iOS 10	2048 x 1536	9.7寸	2x
iPad Pro	iOS 9	2732 x 2048	12.9寸	3x
iPad Pro (取代9.7寸)	iOS 10	2224 x 1668	10.5寸	3x
iPad mini	iOS 6	1024 x 768	7.9寸	1x
iPad mini 2	iOS 7	2048 x 1536	7.9寸	2x
iPad mini 3	iOS 8	2048 x 1536	7.9寸	2x
iPad mini 4	iOS 9	2048 x 1536	7.9寸	2x

转载于:https://juejin.im/post/5c9c89ece51d453ce95af6df