常用机型分辨率
机型 | 手机分辨率 | 屏幕尺寸 | ppi/dpi | dpr |
---|---|---|---|---|
iphone5 | 640*1136 | 4.0 | 2 | |
iphone6 | 750*1334 | 4.7 | 325 | 2 |
iphone6plus | 1242*2208 | 5.5 | 3 |
参考链接: 分辨率,PPi,DPI,DPR,物理像素,逻辑像素
更多: iPhone 各尺寸手机分辨率
常用机型rem适配
// 适配不同屏宽
@media screen and (max-width: 10px)
html {
font-size: 10px !important;
}
@media screen and (min-width: 10px) and (max-width: 320px)
html {
font-size: 10px !important;
}
@media screen and (min-width: 321px) and (max-width: 375px)
html {
font-size: 13px !important;
}
@media screen and (min-width: 376px) and (max-width: 435px)
html {
font-size: 14px !important;
}
@media screen and (min-width: 436px) and (max-width: 600px)
html {
font-size: 15px !important;
}
@media screen and (min-width: 601px) and (max-width: 700px)
html {
font-size: 16px !important;
}
@media screen and (min-width: 701px) and (max-width: 1080px)
html {
font-size: 17px !important;
}
@media screen and (min-width: 1081px)
html {
font-size: 18px !important;
}
用法示例
2倍图UI
// rem适配:字号16px
.title {
font-size: (16/13)rem;
}
// rem适配:宽30px 高30px 上边距8px
.content {
margin-top: (8/13)rem;
width: (30/13)rem;
height: (30/13)rem;
}
为了减少计算,可以使用css预处理器(如stylus)封装一下
// px转化为rem
pxToRem(val)
(val / 13)rem
// rem适配:字号 16px
.title
font-size pxToRem(16)
// rem适配:宽 30px; 高30px; 上边距 8px
.content
margin-top pxToRem(8)
width pxToRem(30)
height pxToRem(30)