## 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
- 開始
- 微信小程序
- 獲取用戶信息
- 記錄
- HTML
- HTML5
- 文檔根節點
- 你真的了解script標簽嗎?
- 文檔結構
- 已經落后的技術
- form表單
- html實體
- CSS
- css優先級 & 設計模式
- 如何編寫高效的 CSS 選擇符
- 筆記
- 小計
- flex布局
- 細節體驗
- Flex
- Grid
- tailwindcss
- JavaScript
- javascript物語
- js函數定義
- js中的數組對象
- js的json解析
- js中數組的操作
- js事件冒泡
- js中的判斷
- js語句聲明會提前
- cookie操作
- 關于javascript你要知道的
- 關于innerHTML的試驗
- js引擎與GUI引擎是互斥的
- 如何安全的修改對象
- 當渲染引擎遇上強迫癥
- 不要使用連相等
- 修改數組-對象
- 算法-函數
- 事件探析
- 事件循環
- js事件循環中的上下文和作用域的經典問題
- Promise
- 最佳實踐
- 頁面遮罩加載效果
- 網站靜態文件之思考
- 圖片加載問題
- 路由及轉場解決方案
- web app
- 寫一個頁面路由轉場的管理工具
- 談編程
- 技術/思想的斗爭
- 前端技術選型分析
- 我想放點html模板代碼
- 開發自適應網頁
- 后臺前端項目的開發
- 網站PC版和移動版的模板方案
- 前后端分離
- 淘寶前后端分離
- 前后端分離的思考與實踐(一)
- 前后端分離的思考與實踐(二)
- 前后端分離的思考與實踐(三)
- 前后端分離的思考與實踐(四)
- 前后端分離的思考與實踐(五)
- 前后端分離的思考與實踐(六)
- 動畫
- 開發小技巧
- Axios
- 屏幕適配
- 理論基礎
- 思考
- flexible.js原理
- 實驗
- rem的坑,為什么要設置成百分比,為什么又是62.5%
- 為什么以一個標準適配的,其它寬度也能同等適配
- 自適應、響應式、彈性布局、屏幕適配
- 適配:都用百分比?
- 番外篇
- 給你看看0.5px長什么樣?
- 用事實證明viewport scale縮放不會改變rem元素的大小
- 為什么PC端頁面縮放不會影響rem元素
- 究竟以哪個為設備獨立像素
- PC到移動端初試
- 深入理解px
- 響應式之柵格系統
- 深入理解px(二)
- 一篇搞定移動端適配
- flex版柵格布局
- 其他
- 瀏覽器加載初探
- 警惕你的開發工具
- JS模塊化
- webpack
- 打包原理
- 異步加載
- gulp
- 命名規范
- 接口開發
- sea.js學習
- require.js學習
- react學習
- react筆記
- vue學習
- vue3
- 工具、技巧
- 臨時筆記
- 怎么維護好開源項目
- 待辦
- 對前端MVV*C框架的思考
- jquery問題
- 臨時
- 好文
- 節流防抖