css3 媒介查询 适配移动端

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/shi851051279/article/details/85037157

这种适配方案,适合于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;
	}
}

猜你喜欢

转载自blog.csdn.net/shi851051279/article/details/85037157