如何根据设计图设计rem比例

一、什么是rem?

rem是相对长度单位、相对根元素(既html元素)font-size计算值的倍数的一个css单位,fontsize=100px=1rem,也就是我们前端常说的设配单位rem。因为rem的特性相对长度单位,常被用来做移动适配,pc端页面不推荐使用rem。

二、rem的移动适配原理?

举个列子:

设计稿宽度:600px

移动设备:600px

设置html的 font-size= 移动设备 / 设计稿宽度 * 100 = 100px,那么 1rem = 100px

设置一个盒子的宽度: width=1rem(即100px),此时这个盒子屏占比为:1/6。

当相同的代码运行在屏幕为300px的设备上时,js动态设置html的 font-size= 移动设备 / 设计稿宽度 * 100 = 50px,渲染出来的盒子就是1rem = 50px,这个盒子屏占比同样为:1/6。以此达到移动适配的效果

可以看出适配的的关键就在于js设置html的font-size: font-size= 移动设备 / 设计稿宽度 * 100。那么这个公式怎么来的呢?

首先 移动设备 / 设计稿宽度 是渲染效果相对于设计稿的缩放比

然后 移动设备 / 设计稿宽度 * 100 乘以100是为了把font-size(=rem)放大100倍,因为当font-size小于浏览器支持最小字体大小的时候,浏览器会把fon-size默认为最小字体大小。也可以乘以其他值如50,但是为了好计算,一般设置为10或100,这样,我们只需要把设计稿宽度如 width=50px,除以10或100,改为5rem或0.5rem就好了。

三、如何设置html的font-size大小

我们可以设置一个js文件来处理rem,需要使用rem时调用即可

function rem(){
	//根据设备的宽设置html的字体大小
	document.documentElement.style.fontSize = document.documentElement.clientWidth/7.5 + "px";
}
rem();
//当窗口改变时,调用方法改变rem比例
window.onresize = rem;

也可以这样理解

let width = document.documentElement.clientWidth
//100:指要求其为100:1的比例
//width:指设备宽度
//750:设计图宽度
100*(width/750)+'px'=width/7.5 + "px";

小提示

当我们调试的时候,会发现没有750px宽度的机型,这时候我们可以找宽度为375px的机型,然后此时的比例为50px=1rpx。原理如下:

let width = document.documentElement.clientWidth

//fontSize = 100*(width/750)+'px'原来
fontSize = 100*(width/(750/2))+'px'=100*(2*width/750)//现在

//竟然之前比例为100:1,那么多除2就变成啦50:1啦😎

如果你想用100:1比例直接除375也是一样的效果哦!!只要比例对了就行!!

  • 2
    点赞
  • 3
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值