## rem的坑，为什么要设置成百分比，为什么又是62.5%

[CSS3的REM设置字体大小_rem, 长度单位 教程_w3cplus](http://www.w3cplus.com/css3/define-font-size-with-css3-rem)

[使用Flexible实现手淘H5页面的终端适配_双11前端技术连载, Layout, mobile 教程_w3cplus](http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html)

~~~

在不同的屏幕上，CSS像素所呈现的物理尺寸是一致的，而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。

意思是说，不同屏幕上，相同的CSS像素所呈现的物理尺寸是一致的，但分别所对应的物理像素个数是不一致的。

我不认同这个观点。

这个不同屏幕可以理解为，不同像素密度的屏幕，也就是物理像素的尺寸大小不同，而不关乎屏幕尺寸。

要满足上述观点，那么必须有一种公约，每块屏幕都要遵守的规则，也就是规定怎么定设备无关像素，即屏幕的CSS像素怎么定义。

假设有两块屏幕A，B

A：物理像素尺寸为A_W，物理像素数量A_S，设备像素比为a

B：物理像素尺寸为B_W，物理像素数量B_S，设备像素比为b

设A的CSS像素为X，B的CSS像素为Y

那么：

X = A_S / a

Y = B_S / b

假设在CSS像素为 S 时，他们的物理尺寸相同，为 W

那么有如下规则：

S * a * A_W = S * b * B_W = W

那么：

a * A_W = b * B_W

a/b = B_W/A_W

~~~

[再聊移动端页面的适配_Layout, 布局, mobile, CSS 教程_w3cplus](https://www.w3cplus.com/css/vw-for-layout.html)

[如何在Vue项目中使用vw实现移动端适配_vw, Layout, 布局, Vue, mobile 教程_w3cplus](https://www.w3cplus.com/mobile/vw-layout-in-vue.html)

[走向视网膜(Retina)的Web时代_Retina 教程_w3cplus](http://www.w3cplus.com/css/towards-retina-web.html)

[再谈Retina下1px的解决方案_CSS, mobile 教程_w3cplus](https://www.w3cplus.com/css/fix-1px-for-retina.html)

[手机端页面自适应解决方案—rem布局-前端开发博客](http://caibaojian.com/rem-responsive.html)

> 当然可能有同学问，为什么不一开始把html的font-size设为1px呢，这样换算起来也简单，答：浏览器一般都有最小字体限制，比如谷歌浏览器，最小中文字体就是12px，所以实际上没有办法让1rem=1px。

[前端页面适配的rem换算 - 有你便是晴天 - 博客园](https://www.cnblogs.com/liangxuru/p/6970629.html)

> 62.5% 不能用，要用 625% ？

~~~

chrome强制字体最小值为12px，低于12px按12px处理，那上面的1rem=10px就变成1rem=12px，出现偏差(下面给demo)。

因为浏览器最小只能显示12px的文字，即1em = 12px，而你现在设置基准值为10px，1rem = 10px，而浏览器做不到啊，所以变成了 1rem = 12px，这样显然不符合预期，结果会出现偏差。

所以基准值不能这么设置。基准值不能小于12px。

那么为了方便计算，只能把基准值设为100px了。

根据计算，基准值为100px时，百分比就为 625%(计算原理下面有说明)

~~~

[字体适配为什么用html {font-size: 62.5%;}而非html {font-si... - 简书](https://www.jianshu.com/p/b28e8727633a)

~~~

《响应式Web设计实践》中提到过这一点，桌面浏览器默认页面字体大小是16px，这种情况下设置成具体像素大小或者对应的百分比，看起来的效果是一样的，

但是其他类型的设备的默认字体大小不一定是16px,特别是高分辨率的设备，16px大小的字体在它们上面看起来会非常小，

✨所以不能在body上设置具体像素值，设置成百分比，可以按照设备的基准字体大小给编写的网页设置好最适合用户浏览的字体大小。

✨ 最重要的不是屏幕实际的像素大小，屏幕上文字的可读性才是最重要的。

~~~

> 建议用百分比而不用px做基准，因为移动端不同设备的基准不一定是16px，在PC上100%基准为16px，在移动端100%就不一定是16px了，只设置百分比，不用px做单位，就没有这个问题了。16px基准的百分比为100%，基准为10px时百分比为62.5%，16 \* 62.5% = 10

>[danger] TODO：flexible.js使用的px，有没有此问题呢？待深入证明，flexible.js方案没有涉及到浏览器的默认基准吧，它的方案核心是将屏幕分为多少份。

[大前端学习笔记整理【五】rem与px换算的计算方式 - 飘来荡去的阿宅 - 博客园](https://www.cnblogs.com/azhai-biubiubiu/p/6003597.html)

[javascript - 将html, body的font-size设置为100%有什么用? - SegmentFault 思否](https://segmentfault.com/q/1010000002587006)

[基于vw等viewport视区单位配合rem响应式排版和布局 « 张鑫旭-鑫空间-鑫生活](https://www.zhangxinxu.com/wordpress/2016/08/vw-viewport-responsive-layout-typography/)

~~~

前面一种基于@media的CSS实现问题在于，内容的弹性自适应只会在临界点的时候，“Duang”变化下，于是，我们浏览器尺寸拉伸的时候，会感受到类似“噔噔噔”卡壳的效果，感觉就像是吃了含笑半步癫

使用JS的问题在于他是JS，要保证加载体验，需要头部内联，为了保证实时性，需要多个浏览器变化事件监测，用我的口头禅讲就是“显得啰嗦”。

~~~

[字体适配为什么用html {font-size: 62.5%;}而非html {font-si... - 简书](https://www.jianshu.com/p/b28e8727633a)

> 设置百分比和具体px的区别：最好设置为百分比，高清设备下16px会很小，而设置成百分比，可以按照设备的基准字体大小设置最合适的字体大小。

~~~

《响应式Web设计实践》中提到过这一点，桌面浏览器默认页面字体大小是16px，这种情况下设置成具体像素大小或者对应的百分比，看起来的效果是一样的，

但是其他类型的设备的默认字体大小不一定是16px,特别是高分辨率的设备，16px大小的字体在它们上面看起来会非常小，

✨所以不能在body上设置具体像素值，设置成百分比，可以按照设备的基准字体大小给编写的网页设置好最适合用户浏览的字体大小。

✨ 最重要的不是屏幕实际的像素大小，屏幕上文字的可读性才是最重要的。

~~~

[PXtoEM.com: PX to EM conversion made simple.](http://pxtoem.com/)

~~~

默认：html font-size: 16px; 其实也是100%(也是1em);

1rem = 16px

1px = 1/16rem

px 换算到 rem 的换算比例为 1/16，换算时直接乘以换算比例就行了，也就是直接除以基准值。

----

这样不好换算，我们将基准设置为10px

设置 html font-size: 10px;

1rem = 10px

1px = 1/10rem

现在换算比例为1/10，这样换算时就方便了

那么此时的百分比又是多少呢

设此时百分比为Y

回顾一下，为了换算方便，我们将基准由16变为10了，那么相应的百分比也是由相同的比例转变而来。

所以我们得到规则：

16 -> 10 ⇔ 100% -> Y

于是有以下公式：

16/10 = 100%/Y

于是求得：

Y = 10/16 ， 即为：62.5%(0.625)

同理：

1rem = 100px 时 百分比为 625%

这已经清晰明了了，那么现在的问题就是，为何默认 html font-size: 16px(100%); 有何依据？

~~~

* * * * *

[移动端，多屏幕尺寸高清屏retina屏适配的解决方案 - CSDN博客](https://blog.csdn.net/kormondor/article/details/77894246)

[移动端高清、多屏适配方案](http://div.io/topic/1092)

~~~

上图中，对于一条1px宽的直线，它们在屏幕上的物理尺寸(灰色区域)的确是相同的，不同的其实是屏幕上最小的物理显示单元，即物理像素，所以对于一条直线，iphone5它能显示的最小宽度其实是图中的红线圈出来的灰色区域，用css来表示，理论上说是0.5px。

所以，设计师想要的retina下border: 1px;，其实就是1物理像素宽，对于css而言，可以认为是border: 0.5px;，这是retina下(dpr=2)下能显示的最小单位。

~~~

> 其实物理尺寸并没有变粗啊，视觉上是一样的啊，有时间要用真机测试下。只有在苹果上才看得到区别啊。

[【原】移动web点5像素的秘密 - 白树 - 博客园](http://www.cnblogs.com/PeunZhang/archive/2015/08/19/4709822.html)

> 既然高清屏的问题，“在retina显示屏下网页会由1px会被渲染为2px”，那为何只是边框的问题，应该整个元素的物理尺寸都被放大了一倍啊？

* * * * *

last update：2018-7-19 15:41:54