pc端rem适配_为什么PC端页面缩放不会影响rem元素

## 为什么PC端页面缩放不会影响rem元素

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

> 在Web页面初期制作中，**我们都是使用“px”来设置我们的文本，因为他比较稳定和精确。** 但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，**他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。** 这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。

* * * * *

### 为什么PC段缩放不会影响rem元素

我们知道PC端缩放页面(浏览器的网页缩放功能)其实是改变了dpr(这是可以看得到的，175%时dpr就为1.75)和设备独立像素(放大页面时window.innerWidth值减小)，并且是会触发`resize`事件的。

至于为什么网页缩放不会影响rem元素的物理尺寸(物理尺寸不变，但是现实的设备独立像素即px值是变化的)，这其实和在移动端视口缩放不会影响rem元素的原理相同，这里不再深入解释了，在讨论移动端视口缩放时已经详细的[证明](https://www.kancloud.cn/xiak/quanduan/698257)过这个问题了。

> 元素的rem是写死的，放大页面时，设备独立像素的数量减少，而屏幕显示区域的面积是不变的，则一个 点/设备独立像素 所包含的物理像素的数量增多，由Y=P/Z得知基准值也随着设备独立像素数量的减少而减少，那么元素的点数量也随之减少，**元素的点数量的减少和一个点所包含的物理像素数量的增多刚好抵消，那么最终用于显示该元素的物理像素数量将保持不变**，所以rem元素的物理尺寸不受页面缩放的影响。

>[tip] 所以为了防止用户使用浏览器的缩放功能放大页面时会改变原始的布局(**不是布局被打破了，布局还是好的，没乱，只是放大了**)，布局类元素应尽量使用rem单位。

* * * * *

### 浏览器字号调整(字体大小)和网页缩放功能有什么区别吗？


目前来看，改变字体大小对页面没有影响，改变的是浏览器默认的字体大小，而页面样式都是重写过的，所以不受其影响。上面说的，会影响布局，应该是说的缩放吧。

禁止调整字体大小

-webkit-text-size-adjust: 100%;

### 扩展

[【原】移动web资源整理 - 白树 - 博客园](http://www.cnblogs.com/PeunZhang/p/3407453.html#meta_6)

* * * * *

last update：2018-7-25 19:31:02