背景：
近一段時間在做移動端h5的開發，因此需要考慮到適應各種裝置下的顯示效果。經過學習總結以下，作為記錄備忘。
首先說一下rem單位的屬性；
此方案是通過js初始化不同裝置下html的font-size的大小。
如果ui設計初稿的寬為375px，那麼就可以在裝置寬度為375px的檢視下進行開發，比如谷歌瀏覽器下的iphone6/7/8，因為這樣就會得到1rem=100px；至於為什麼要設定成1rem = 100px;
我認為主要是為了方便計算，比如乙個div的寬為120px;那麼就可以寫成1.2rem;
了解之後，那麼rem單位到底如何使用？
一、首先應該在中設定viewport
initial-scale - 初始的縮放比例
minimum-scale - 允許使用者縮放到的最小比例
maximum-scale - 允許使用者縮放到的最大比例
user-scalable - 使用者是否可以手動縮放
二、然後將以下js**也複製到中，以動態設定html標籤的font-size，從而達到rem自適應的效果；
如果你的設計初稿寬度為320px的話，將 375 更改為 320 既可，其他寬度同理。
三、 再設定bodywindow.onresize = function()裡。
設定好之後應該是這種效果。接下來就可以使用rem來進行頁面布局了。現在來舉個栗子。
假設有乙個div的寬度和高度都是160px;就可以設定其css為
width: 1.6rem;
height: 1.6rem;
background-color: red;
在寬度為320px的裝置上效果為
該div在不同裝置上所佔的比例是相同的，這樣就達到了不同裝置上的自適應。
本方案僅初步實現移動端自適應的效果。並未進行詳細優化，比如不同裝置畫素比（dpr）下清晰度的處理等。
首次嘗試寫一些東西，如有錯誤還請各位指出。感謝
2023年6月3日追加 阿里高畫質方案
移動端自適應與rem
提到移動端適配，小夥伴們都會想到rem布局，那麼rem是什麼呢？我們有為什麼要使用rem呢?下面我們就來討論一下。rem是相對於根元素 也就是說到rem又不免想到em。那麼他們之間有什麼血緣關係嗎？是的，他們可能是兄弟 父子，也可能是爺孫關係。它們之間的區別在於，rem依賴於根元素,而em是依賴於父...
移動端自適應rem布局
補充乙個基本知識，不許笑，1rem等於html中設定的字型大小 px 首先，html 的 head 部分中加入如下 initial scale 初始縮放比例，即當瀏覽器第一次載入頁面時的縮放比例。值為 1.0 即原始尺寸。maximum scale 允許瀏覽者縮放到的最大比例，一般設為1.0，即原始...
移動端自適應rem大小
自執行函式封裝 以iphone5的根字型大小為20px螢幕邏輯畫素為320，可以改變 字串名字 in window 判斷window下有沒有這個字串方法屬性，返回布林值 orientationchange 螢幕方向改變時候觸發的函式 resize螢幕尺寸發生改變時候觸發的函式 function do...