## 為什么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元素的原理相同，這里不再深入解釋了，在討論移動端視口縮放時已經詳細的[證明](http://www.hmoore.net/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