資訊專欄INFORMATION COLUMN
摘要：特別注意的是，瀏覽器默認瀏覽器默認最小字號為所以一般情況下，的不要小于動態動態其實是為移動端適配而誕生的。動態思路動態采用整體縮放的思想，在頁面渲染之前，使用獲取設備寬度并設置，之后的布局單位全部使用來實現整體縮放。
前言
總是看到em、rem、動態rem，究竟他們的區別是什么呢？
單位px：像素
em：一個 M 的寬度（面試：一個字的寬度）
rem：root em 根元素（）的 font-size
vh：view height，視口高度 100vh === 視口高度
vw：view width，視口寬度 100vw === 視口寬度
由上述可知，rem和em根本沒有任何聯系。
特別注意的是，瀏覽器默認 font-size:16px;Chrome瀏覽器默認最小字號為12px：font-size:12px;所以一般情況下，rem 的font-size不要小于12px;
動態rem其實是為移動端適配而誕生的。動態REM思路：動態rem 采用整體縮放的思想，在頁面渲染之前，使用JS獲取設備寬度并設置rem，之后的布局單位全部使用rem來實現整體縮放。
使用方法值得注意的是，pageWidth根據實際情況可以適當的縮小（如0.1倍），但是要特別注意縮小后會不會小于瀏覽器規定的最小字體。在使用動態 rem 布局的移動端頁面中，單位可以混用，很小的寬度如border-width 依然使用px，因為即使使用rem，當rem小于1px 時，依然會被瀏覽器當做1px 使用。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116223.html
摘要：真的是給我們新手學習移動端適配造成不少困惑英語真的很重要呀。細節高清屏上的處理其實并不是所有做移動端適配的人都一定會遇到這個問題。 一次搞清楚移動端這幾個坑爹的單位慨念 目錄: 一、讓坑爹的單位,不再坑爹 二、需要準備什么樣的設計稿 三、rem方案的原理和細節 高清屏上,位圖的處理 高清屏上,關于border: 1px的處理 移動端屏幕的自動適配的處理 移動端屏幕上字體大小的處理...
摘要：真的是給我們新手學習移動端適配造成不少困惑英語真的很重要呀。細節高清屏上的處理其實并不是所有做移動端適配的人都一定會遇到這個問題。 一次搞清楚移動端這幾個坑爹的單位慨念 目錄: 一、讓坑爹的單位,不再坑爹 二、需要準備什么樣的設計稿 三、rem方案的原理和細節 高清屏上,位圖的處理 高清屏上,關于border: 1px的處理 移動端屏幕的自動適配的處理 移動端屏幕上字體大小的處理...
移動端適配-rem: 認識移動端 做適配方案之前先認識下移動端，熟悉移動端和pc端的區別和特點，才能真正理解做適配的精髓，這里就簡單介紹下； 網上找不到主流android設備的數據表，就以iphone為例：showImg(https://segmentfault.com/img/bV8ZZH?w=857&h=434); 以iphone6為例：豎屏寬為375，叫做邏輯像素（有的地方叫獨立像素）；豎屏...
移動端適配-rem: 認識移動端 做適配方案之前先認識下移動端，熟悉移動端和pc端的區別和特點，才能真正理解做適配的精髓，這里就簡單介紹下； 網上找不到主流android設備的數據表，就以iphone為例：showImg(https://segmentfault.com/img/bV8ZZH?w=857&h=434); 以iphone6為例：豎屏寬為375，叫做邏輯像素（有的地方叫獨立像素）；豎屏...
閱讀 3569·2021-11-15 11:36
閱讀 1060·2021-11-11 16:55
閱讀 694·2021-10-20 13:47
閱讀 2993·2021-09-29 09:35
閱讀 3428·2021-09-08 10:45
閱讀 2554·2019-08-30 15:44
閱讀 849·2019-08-30 11:10
閱讀 1428·2019-08-29 13:43
