為什么用rem不用px?
主流：各大網站的移動版絕大多數都是用的rem。
移動端屏幕分辨率差別太大：最低適配的iPhone6，分辨率僅為750*1334。而現在市面上大多數手機，都達到了1080*1920或1080*2340（全面屏）。
所有元素都要用rem嗎？
大部分時候都是如此，但也有一些例外，比如文字的font-size，可能直接設為如17px，直接寫死。一些近乎占滿整個寬度的banner，可能它的樣式會是這樣：(width: 100%;padding: 0 10px;)，即左右寬度也用px寫死。所以在移動端項目，出現rem和px混寫也是再正常不過的事情。這就跟響應式布局的原則是一樣的。不需要所有設備的布局比例嚴格完全相同，而是優先保證內容比較舒服地顯示。
順便提一下，應該大部分移動端文字內容都是用px寫死的，不會用rem去寫。防止過大或過小的文字效果。
移動端開發的通用原則是：文字流式，控件彈性，圖片等比縮放。
為何要引入flex?
為了彈性控件，比如有些關鍵元素，里面有些控件，不管移動設備的分辨率怎么變，這個關鍵元素的高度恆不變，只有控件的間距在做動態的調整。舉個例子，京東的底部導航欄：
（京東移動版在iPhone8p和ipad上的視覺比例不太一樣，如果按同一個比例原封不動地移植到ipad上，很多圖標和元素會顯得非常巨大）
如何設置html初始的font-size?
沒有固定答案，但它的設置又很影響開發的效率。為了避免rem和px的大量換算，我提供一個自己的做法：根font-size完全取決於設計稿的尺寸。
根據設計稿的尺寸，把根font-size處理成100px。在開發的過程中，比如碰到一個120px*40px的元素，那就可以寫成1.2rem*0.4rem，十分方便。
比如設計稿是750*1334px，也就是以iPhone6為基礎的。那要處理成100px的根font-size，就需要屏幕寬度/7.5即可。如果設計稿是1080*1920的，那就用屏幕寬度除以10.8。
設置的具體代碼？
比如我現在的設計稿是750*1334px的，我在項目的index.html中加入這樣一段js代碼：
<script> let deviceWidth = document.documentElement.clientWidth || document.body.clientWidth; let htmlDom = document.querySelector('html'); htmlDom.style.fontSize = deviceWidth / 7.5 + 'px'; </script>
還需要設置一下視口viewport,來避免devicePixelRatio帶來的關於邏輯像素和物理像素的問題：
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
比如在這里，我設置了“朋友圈所在的header樣式如下：
即寬度為7.5rem，在各個移動端效果如下：
（可以看到，都占滿了橫向寬度，即能正確顯示寬度為100%）
看了好幾家大型網站的移動版網站，雖然看不到源碼，但是我猜測騰訊視頻移動版網站跟我的想法應該是一樣的，而且設計稿應該就是750*1334px。傳送門：https://3g.v.qq.com/。此外，我還借鑒了流雲諸葛小伙伴的一篇文章，分析得很詳細，感謝他這種研究精神。原文地址：https://www.cnblogs.com/lyzg/p/4877277.html?utm_source=caibaojian.com