css3 媒介查詢 適配移動端

泥猴桃發表於2018-12-16

這種適配方案,適合於640 的設計稿,剛好1rem = 100px,使用起來比較簡單,真實px尺寸前進兩位小數點就是對應的rem 值,使用方便;

@media screen and (min-width: 320px) {
	html {
		font-size: 50px;
	}
}
@media screen and (min-width: 360px) {
	html {
		font-size: 56px;
	}
}
@media screen and (min-width: 400px) {
	html {
		font-size: 63px;
	}
}
@media screen and (min-width: 440px) {
	html {
		font-size: 69px;
	}
}
@media screen and (min-width: 480px) {
	html {
		font-size: 75px;
	}
}
html {
	font-size: 15.625vw;
}
@media screen and (min-width: 640px) {
	html {
		font-size: 100px;
	}
}

相關文章