css3 媒介查询适配移动端

最新推荐文章于 2023-04-26 15:18:11 发布

泥猴桃

最新推荐文章于 2023-04-26 15:18:11 发布

阅读量351

点赞数

CC 4.0 BY-SA版权

分类专栏：移动端 css3 文章标签：移动端rem适配方案

本文链接：https://blog.youkuaiyun.com/shi851051279/article/details/85037157

css3 同时被 2 个专栏收录

7 篇文章

订阅专栏

移动端

6 篇文章

订阅专栏

本文介绍了一种适用于640设计稿的响应式布局适配方案，通过设置不同屏幕宽度下的字体大小，实现1rem等于100px的目标，简化了样式设置，使真实px尺寸转换为rem值更为便捷。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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