移动端适配的一些理解

标签：one   为什么   element   iphone   iphone6   屏幕宽度   doc   需要   cli   

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

移动端适配的一些理解

标签：one   为什么   element   iphone   iphone6   屏幕宽度   doc   需要   cli   

原文地址：https://www.cnblogs.com/javascript9527/p/14929749.html