rem css 等比例缩放方案

最新推荐文章于 2024-07-31 02:32:11 发布

Khivan

最新推荐文章于 2024-07-31 02:32:11 发布

阅读量535

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_42580643/article/details/116806680

版权

本文介绍了一种基于REM的CSS解决方案，用于在不同屏幕尺寸下实现移动端页面的等比例缩放。通过设置html字体大小为4vw，确保在375px设计图基础上的样式兼容。例如，元素.test的宽度在1200px设计图上为90px，会根据屏幕宽度等比例调整。此外，还展示了如何使用媒体查询针对小于768px的屏幕调整宽度。

摘要由CSDN通过智能技术生成

记录一种rem的使用方式

这是一种rem的css等比例缩放解决方案
一般情况下，UI设计师最少会出一套基于375px的移动端设计图。因此只要在开发过程中专注375px的设计图样式，基于此方案就可以兼容其他屏幕宽度。如果有多套设计图，可使用媒体查询搭配rem进行开发。

html{
	font-size: 4vw;
	//计算公式：1rem = 375 / 100 * 4 = 15px
}

//常见的PC端设计图是1200px宽
.test {
    width: 6rem;//在1200px宽的设计图上，样式宽度是90px。到了其他宽度屏幕会等比例缩放
}

//假设需求是小于于768px就显示移动端样式
@media screen and (max-width: 768px){
	.test{
		width: 1rem;//这里的宽度width在iphone6上就是15px，在iphone5上就是12.8px ...
	}
}