【css】移动端rem开发 多机型（分辨率）适配 根大小font-size

常用机型分辨率

机型	手机分辨率	屏幕尺寸	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)