通常我们会使用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 |