1. 程式人生 > >手機端頁面不同大小適配

手機端頁面不同大小適配

適配:

 

<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";}}