淺析rem
首先rem是css單位，相比於px固定的像素單位，rem更加的靈活，還有現在也比較好的vm。如果從未了解過，可以先過過眼
rem自適應。CSS3的REM設置字體大小
font size of the root element.
簡單來說，rem就是根據html元素的字體大小來計算單位的。我們的需求就是說，根據不同的分辨率，我們元素的大小能夠有所對應的變化，在視覺上能夠做到很舒服的效果。想想我們在做pc端的時候，一般都是中間固定比如1200px像素，然后最小1200px，兩邊留白，這樣我們無論放大縮小都不會影響效果。但是現在移動端各種屏幕的出現，適應性就更加的強烈。根據分辨率的不同讓html的字體大小變化，我們在頁面中寫rem，由於rem是相對於根元素字體大小來計算的，那么就可以實現自適應的效果。
移動端自適應——手淘flexible
熟悉移動端的自適應方案的朋友對 rem 適應方案，肯定不陌生，最出名的就是阿里的 lib-flexible 方案。
原理：flexible就是根據不同的屏幕算出html的font-size，通過js來動態寫meta標簽。
事實上他做了這幾樣事情：
動態改寫<meta>標簽
給<html>元素添加data-dpr屬性，並且動態改寫data-dpr的值
給<html>元素添加font-size屬性，並且動態改寫font-size的值
比如我們在做移動端的時候，經常拿到的設計稿是640px或者750px。自己項目中就是640px，以此為例，自己在項目中為了計算方便，所以給html根元素設置的字體大小是100px，也就是在640px下面。這里注意，我們給html設置100px，這個是字體哦，所以最好在body設置一下字體大小。
// 設置html元素的字體大小為100px
// 所有的像素我們直接除以
640px —— 6.4rem
64px —— 0.64rem
那么如果64px，對應我們寫rem就是0.64rem，也不需要動用計算器去計算rem，需要多強的大腦呀（雖然有很多插件幫我們）
修改flexible.js。640px下面的10就變成6.4
這樣，我們頁面直接把px換算成rem，就可以實現自適應。（記住，自己這里以640px設計稿為基礎，如果是750px就是除以7.5）。
字號不使用rem
我們都知道chrome的最小顯示的字體是12px，如果字體用rem，計算出來小於12px，那么就也會以12px顯示，而且我們不希望出現13px或者15px這樣的奇葩尺寸，所以字體最好是用px來表示，至於適應，我們可以寫媒體查詢。
vue中使用rem
vue現在正是火的勢頭上，作者說明年估計3.0要出來了。那么在vue我們如果做移動端自適應怎么弄呢？
安裝flexible
在命令行中運行如下安裝：
npm i lib-flexible --save-dev
引入flexible
在項目入口文件 main.js 里 引入 lib-flexible
// main.js
import 'lib-flexible'
對於我們的index.html，最好是不要meta標簽，flexible會自動添加上的，因為有一個判斷。當然了，懶惰果然是最大的生產力，有的人覺得換算rem太麻煩，就出現了插件px2rem-loader，把px自動轉化為對應的rem。但是呢，麻煩的就是如果引入外部的css文件，那么也會把px轉化為rem。自己在項目中就是手動計算rem，用上面的方法，直接除以100，這個應該很簡單吧，都是程序員，數學這個還是可以吧......
大屏自適應
你問我什么是大屏，當當當~
這個圖片很熟悉吧，時刻數據的滾動，通俗的說就是在很大很大的屏上顯示數據，怎么炫酷怎么來。
我廠的效果類似於下面這樣，但是更好看點，嗯，得自信不是。
這樣的設計稿一般是1920*1080，然后需求就是大屏，放在大屏展示。其實實現的效果也是用的rem。當然之前也內部封裝的縮放在body上來顯示。
心目中的理想效果就是無論窗口怎么變，我們的內容都保持原來的比例，並盡量占滿窗口。大屏，你如果不希望展示更多的文本，還嫌麻煩，字體也可以使用rem，畢竟很方便。和上面移動端一樣的方法rem+flexible就可以比較很好的展示了。這時候內部除以的數字就是19.2來計算html字體的大小了。
終於寫完了，本來想把大屏單獨出來的，有很多的知識點，但是想想都是用的一樣的技術，還是在一起吧，反正技術無好壞，就看怎樣使用了。
最后放上騰訊前端團隊的一篇文章rem不是神農草，治不了移動端百病
參考資料：
大屏
https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html
https://juejin.im/post/5a20fe96f265da431120025b
rem+vue中使用rem
基於vue-cli配置移動端自適應
flexible.js如何實現rem自適應
vue-cli 配置flexible
————————————————
版權聲明：本文為CSDN博主「雨中暢游」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/viewyu12345/article/details/83153718