手机端页面不同大小适配

适配：

 

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

 

 

/*6*/
@media (min-device-width:320px) and (max-device-width:375px) {
	body{font:12px/1.5 "Microsoft Yahei";}
	
}
@media (min-device-width:375px) and (max-device-width:376px) {
	body{font:14px/1.5 "Microsoft Yahei";}
	
}

/*6+*/
@media (min-device-width:386px) and (max-device-width:400px) {
	body{font:13px/1.5 "Microsoft Yahei";}

}
@media (min-device-width:401px) and (max-device-width:640px) {
	body{font:15px/1.5 "Microsoft Yahei";}	

}

@media only screen and (min-device-width:1079px) and (-webkit-min-device-pixel-ratio:2.5){
	body{font:13px/1.5 "Microsoft Yahei";}}