移动端适配的一些理解

时间:2021-06-25 17:04:48   收藏:0   阅读:0

 


rem是相对于根元素html的font-size。 1rem = html的font-size


移动端适配通常使用rem。

在开发时,设计稿通常为750px物理像素 ,所以用750设计稿举例
对应的iphone6的375px逻辑像素。(物理像素是逻辑像素的2倍)

375 / 7.5 = 50px(375 / 750 * 100 = 50px)
屏幕宽度 / 7.5 = html字体大小

转化为代码
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + ‘px‘


大多数人走到这一步会有疑问,为什么是用屏幕宽度除以7.5呢? 是应为设计稿是750的原因吗?
我的理解是,除以7.5和设计稿的750没有关系,只是为了方便计算,如何方便计算,看到下面就会明白了。

现在我们经过一系列操作得到以下代码:
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + ‘px‘

在iphone6上,屏幕宽度是375,所以,html 字体的大小是 50px, 那么 1rem = 50px (我们只需要计算好iPhone6上rem,其他设备就会自动适配)


假设:在750的设计稿上,有一个宽高各100px的正方形,那么转化到iphone6上等于多少rem呢?

100px 是物理像素,从750设置稿 转到 375设备上, 需要除2 ,所以 100px / 2

在iphone6上,目前设置的html是50px, 1rem = 50px

所以最后得到的结果是: 100px / 2 / 50px = 1rem,我们可以得到一个公式(设计稿上的像素 / 2 /50 就等于转化后的rem)
再简化一步( 设计稿上的像素 / 100 就等于转化后的rem)
所以,今后只要设计稿是750px, 我们在iPhone6上开发, 转化rem时候,
设计稿像素/100 = 转化后的rem

那么设计稿上 宽高100px的正方形 = 100px / 100 = 1rem

 

 

 

 

 

 

 

 

 

 

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!