『壹』 pc端web、移動端web的字體大小、顏色、字體樣式使用
首先了解下px，em，rem的區別
px（像素）是絕對單位，頁面按精確像素展示，使頁面較穩定和相對固定一些。但這種方法存在一個問題，用戶在瀏覽我們製作的web頁面時，如果他改變了瀏覽器的字體大小，或是昌亮縮放、放大頁面，這時會使頁面布局被打亂。
em是相對單位，基準點為父節點字體的大小。上面說到使用px為單位的web頁面會遇到的問題可以使用em來解決。
例如con2的父元素為con1，css中<耐陵寬strong>con1</strong>和<strong>con2</strong>的font-size都設置為2em；
可以看得出con1和con2的font-size樣式都是2em，但是展現出來的字體大小不一樣,因為默認情況下沒有對字體進行重新設置的話，瀏覽器默認字體為16px，con1的2em就相當於32px，那麼con2的2em就相當於con1的兩倍也就是64px，所以con2字體比con1的大。
rem是相對於頁面根元素的大小單位，我們只需給頁面的根元素設置一個參考值，就可以在頁面中根據參考值設置其他元素的大小，rem不會出現嵌套的繁瑣。
設置html下1rem=10px
可以看得出1rem就是12px（汪敏瀏覽器下最小的字體為12px，當設置小於12px的字體，也默認為12px）
無論元素處於哪一層，都不會受到父元素的影響。
『貳』 移動端頁面單位的選擇（px, em, rem, vw）
px: 絕對字體大小
em: 基於一個基數來計算出相對字體大小。(移動端用的少)
rem: 基於根節點（html）的字體大小來計算。
vw: 可視區寬度單位。1vw等於可視區寬度的旅春正百分之一。
跟字體大小有關
l瀏覽器默認字體是16px,這里父級字體大小是20px,所以#box里的1em = 20px;即#box是一個長寬均為400px的正方形
vw單位和百分比很相似，不同的是vw的值對所有的元素都一樣， 與他們父元素或父元素的寬度無關
以414寬度的屏幕為例
做一個200 * 200的盒子
rem 的字體大小直接與html的字體大小有關。默認是16px = 1rem;
我們可以給html設置10px的字體森橡大小
大多數瀏覽器（不包括ie8以下）都支持rem單位，如果想都支持，可以
可是這樣在拆悔實際開發中，換算起來非常麻煩，所以，我們對此進行了修改，根據手機屏幕的大小，做了自適應。
首先，我們在html的head里邊設置html的font-size.
然後根據設計圖的尺寸和手機屏幕的尺寸進行換算。
『叄』 移動端rem自適應布局-最簡單易懂的兩種方法
em 是個相對單位，等於該元素或父元素的font-size值；
rem: root 1rem等於根元素的font-size值
Vw（寬）、vh： 把屏幕分為100份，1vw等於屏幕的1%
1、給文件根元素設置font-size值（會影響字體，但可以解決）
<script>
//以iphone6為例，尺寸375，此時font-size=100px。便於計算
var fonsiz=document.documentElement.clientWidth/3.75;
document.documentElement.style.fontSize=fonsiz+"px";
</script>
2、給html設置rem布局後，需要給body重新設font-size，不然很難處理正常的尺寸
body {
碧陪巧 font-size: 16px;
}
3、vscode 安裝 px to rem 插件，設置其擴展設置的值為100
4、選中需要把px改為rem單位的css樣式，alt+z更換為rem布局
1、安裝px to rem插件設置100px轉換，如上圖3，100px=26.667vw=100/3.75，給html標簽設置vw
html {
font-size: 26.66667vw;
}
2、選中悔鍵需要把px改為rem單亂散位的css樣式，alt+z更換為rem布局
『肆』 移動端布局適配（px,em,rem,vh,vw)
px就是pixel像素的縮寫，相對長度單位，網頁簡耐枝設計常用的基本單位。像素px是相對於顯示器屏幕解析度而言的
em是相對長度單位。相對於當前對象內文本的字體尺寸（參考物是父元素的font-size）
如當前父元素的字體尺寸未設置，則相對於瀏覽器的默認字體尺寸
特點：
1. em的值並不是固定的；
2. em會繼承父級元素的字體大小
rem是CSS3新增的一個相對單位，rem是相對於HTML根元素的字體大小（font-size）來計算的長度單位
如果你沒有設置html的字體大小，就會以瀏覽器默認字體大小，一般是16px
html{font-size: 62.5%} /* 10 ÷ 16 × 100% = 62.5% */
body{font-size: 1.4rem;} /* 1.4 × 10px = 14px */
/ 在根元素中定義了一個基本字體大小為62.5%（也就是10px。設置這個值主要方便計算，如果沒有設置，將是以「16px」為基準 ） /
優點是，只需要設置根目錄的大小就可以把整個頁面的成比例的調好
rem兼容性：除了IE8及更早版本外，所有瀏覽器均已支持rem
em與rem的區別：
rem是相對於根元素（html）的字體大小，而em是相對於其父元素的字體大小
兩者使用規則：
*
如果這個屬性根據它的font-size進行測量，則使用em
*
其他的一切事物屬性均使用rem
vw、vh、vmax、vmin這四個單位都是基於視口
vw是相對視口（viewport）的寬度而定的，長度等於視口寬度的1/100
假如瀏覽器的寬度為200px，那麼1vw就等於2px（200px/100）
vh是相對視口（viewport）的高度而定的，長度等於視口高度的1/100
假如瀏覽器的高度為500px，那麼1vh就等於5px（500px/100）
vmin和vmax是相對於視口的高度和寬度兩者之間的最小值或最大值
/*
如果瀏覽器的高為300px、寬為500px，那麼1vmin就是3px，1vmax就是5px；如果瀏覽器的高為800px，寬為1080px，那麼1vmin也是8px，1vmax也是10.8px
*/
其他單位：
%（百分比）
一般來說就是相對於父攔敏元素
1、對於普通定位元素就是我們理解的父元素
2、對於position: absolute;的元素是相對於已定位的父元素
3、對於position: fixed;的元素是相對於ViewPort（可視窗口）
css3新單位，相對於視口的寬度或高度中較小的那個
其中最小的那個被均分為100單位的vm
比如：瀏覽器高度900px，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px
缺點：兼容性差
1、假如使用em來設置文字大小要注意什麼？
注意父元素的字體大小，因為em是根據父元素的大小來設置的。
比如同樣是1.5em，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px（特別是在多重div嵌套裡面更要注意）
2、pc pt ch一般用在什麼場景？
這些我們網頁設計基本上用畝配不到，在排版上會有用處
3、如何使 1rem=10px
在設置HTML{font-size：62.5%；}即可
4、如果父元素沒有指定高度，那麼子元素的百分比的高度是多少？
會按照子元素的實際高度，設置百分比則沒有效果
『伍』 移動端web開發 rem要怎麼用
1、rem介紹
rem（font size of the root element）是指相對於根元素（即html元素）的字體大小的單位。
假設根元素的字體大小是10px, 則5rem的大小為5*10=50px,例如
『陸』 移動端適配-px轉成rem
rem單位是相對於根節點的字體大小的，所以通過設置根節點的字體大小可以動態的改變rem的大小
rem方案的原理其實就是，將每一個不同的屏幕劃分成相同的份數，讓同一個元素在不同的屏幕上占據相同比例的空間。1rem等於此頁面html的font-size，rem可以理解為每份是多少px
比如，設計稿寬度為375px，將頁面劃分成10份，那麼1rem=37.5px，如果有一個div寬度為37.5px，換算成rem為1rem。將375px寬的屏幕劃分為10份，這個div寬度佔一份。
即 document.body.clientWidth / 10
同理，如果我們想讓1rem=10px，那麼document.body.clientWidth / 37.5即可
npm install amfe-flexible
import 'amfe-flexible'
此時默宴笑認，1rem = 16px，可稿斗以看到鍵祥磨Elements中 <html lang="en" style="font-size: 16px;">
在現在的htmlUI設計圖中，右上角可選擇切換單位，切換到 CSS Rem 16px，即可得到對應的rem標注，不需要手動換算
（若想更改rem和px的換算比例，參考第三步）
此時 1rem = 10px，可以看到Elements中 <html lang="en" style="font-size: 10px;">
『柒』 移動端布局vw和vh、em與rem
盒模型是由padding、margin、width、height 這幾個屬性構成的。一個元素在網頁中占據的真正空間大小就是盒模型的大小，而非簡單的寬高值。
padding 和 margin 在設置百分比時，縱向的值並不是按照父級的 height 來計算的 ，而是按照寬度。
margin 四個方向的百分沖梁比均是按照父元素的寬度（640px）進行計算的，也就是說，每個p標簽的寬度為 116px（18%），高度就是220px（83%），如此計算，一個p元素盒模型的大小為 128px*308px。
CSS 的基本模型著重於 排版 的需求，因此水平和垂直方向上的排版並不是同等權重的。當文字排列方向為橫向排列時，就採用水平方向上的排版模式。排版默認是水平寬度一定，垂直方向上可以無限延展。當文字排列方向為縱向時，就採用垂直方向上的排版模式，也就是高度一定，水平方向上無限拓展。
使用百分比設置內外邊距時，文字書寫方向就決定了 margin、padding 是按照 height 還是 width 來計算。
寬度和高度，設置百分比時，就是按照對應父盒子的寬高（不是總寬總高，換句話說，不包含內外邊距）來計算的。
行高設置百分比時，是針對當前元素的字體尺寸來進行計算的。比如，當前元素默認字體大小為 16px，那設置行高 line-height: 100% ，也就是 line-height: 16px; ，也等同於 line-height: 1 。
vw、vh、em、rem，這些單位都是在CSS3中新增的相對度量單位。但是在移動端開發中，應該選取哪個單位作為主力開發？
em ：em 是相對於當前對象內文本的字體大小進行設置的。如果當前對象內文本字體尺寸為被 人為設置 ，則相對於人為設置的值。換句話說，如果當前div字體大小為12px，那 1em=12px。由於每一級都需要進行單獨的計算，所以很不適合用來做移動端的相對度量單位；
rem ：這個單位，在剛出來不久，就讓每個開發人員都眼前一亮。雖然 rem 也是和字體相關的相對度量單位，但是，它比em更加簡單方便。首先，rem 是按照根元素字體的大小進行設置的，所以只要在根元素設置字體大小，不管在哪一個元素使洞碧用rem，都是不會受到其他影響的。
有了 rem 這個特性，它納判舉就能與 JS 配合，很好地解決了移動端的各種像素大小問題。首先通過JS獲取設備寬度，然後根據設備寬度來調整HTML這個元素的文字大小。
由於新增的初期，vw 的兼容性是非常不容樂觀的，各大主流瀏覽器都陣亡的前提下，rem + JS 獨佔了移動端端一個主流布局方式。
vw、vh 是針對移動設備，如果視窗的大小發生改變，這兩個值也會跟著發生相應的變化。所以在使用情況上來看，vw 比 rem 更加的智能。由於現在的主流瀏覽器對vw的兼容性是非常成熟的，所以現在移動端布局主要考慮 vw。
開設設計稿的寬度是 350px，設計稿中一個盒子的大小為 100px * 100px，那如果想將100px轉換成vw單位，首先要知道在設計稿中，1vw 代表的像素是多少，比如這里設計稿是350px，那1vw = 350 / 100 = 3.5px，那盒子大小為100px，換算成vw就是 100 / 3.5 = 28.57vw。
具體換算可以按照下面的公式
750px下測量的寬度 / 750 * 100)
『捌』 如何利用rem在移動端不同設備上讓字體自適應大小
1
2
html{font-size：62.5%}
body{font-size：1.2rem}
對於上面的代碼了解過rem的人基本也知道什麼意思，這樣的結果就是1.2rem=12px，但是在項目中使用rem作為字體單位時並沒有什麼卵用，萬能的網路教會了亂塌衫rem這個單位，卻並沒有教會我如何使用他，好吧自己摸索吧，然後就有了下面這個js代碼
(function (doc, win) {
// html
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
clientWidth = (clientWidth > 768 ) ? 768 : clientWidth ; docEl.style.fontSize = 10 * (clientWidth / 375 ) + 'px';
};
if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false);
recalc();
})(document, window);
/*移動端適應大小*/
使用時建議單獨建一個js包，要用直接引用就行，引入上面 的js代碼嘩腔後，字體和高度使用rem作為單衫虧位，寬頻設為百分比，項目在不同的移動端設備就會自動適應屏幕啦
『玖』 Vant移動端rem適配方案
1、Vant 中的樣式默認使用 px 作為單位，如果需要使用 rem 單位，推薦使用以下兩個工具 ：
[ lib-flexible 用於設置 rem 基準值，設置根字體的大小
postcss-pxtorem 是一款 postcss 插件，用於將單位轉化為 rem
2、使用 lib-flexible 動態設置 REM 基準值
html 標簽的字體大小
2.1 安裝
// yarn add amfe-flexible
cnpmiamfe-flexible-S
2.2 然後在 main.js 中載入執行該模塊
import 'amfe-flexible'
2.3 最後測試：在瀏覽器中切換不同的手機設備尺寸，觀察 html 標簽 font-size 的變化
. 例如在 iPhone 6/7/8 設備下，html 標簽字體大薯檔猜小為 37.5 px
. 例如在 iPhone 6/7/8 Plus 設備下，html 標簽字體大小為 41.4 px
3、使用 postcss-pxtorem 將 px 轉為 rem
3.1 安裝
// yarn add -D postcss-pxtorem
// -D 是 --save-dev 的簡寫
cnpminstallpostcss-pxtorem-D
3.2 然後在 項目根目錄 中創建 .postcssrc.js 文件
mole.exports={
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0','iOS >= 8']
},
'postcss-pxtorem': {
rootValue:37.5,
propList: ['*']
}
}
}
3.3 配置完畢，重新啟動服務
npmrunserve
最後測試： 刷新瀏覽器頁面 ，審查元素的樣式查看是否已將 px 轉換為 rem
轉換之前的樣式
4、注意事項：
該插件 不能轉換行內樣式中的 px ，例如 <div style="width: 200px;"></div>
5、postcss-pxtorem 插件的配置
rootValue：表示根元素字體大小，它會根據根元素大小進行單位轉換
propList 用來設定可以從 px 轉為 rem 的屬性
例如 * 就是所有屬性都要轉換，width 就是僅轉換 width 屬性
rootValue 應該如何設置呢？
如果你使用的是基於lib-flexable的REM適配方案，則應該設置為你的設計稿的十分之一。
例如設計稿是750寬，則應該設置為75。
大多數設計稿的原型都是以 iphone6 為原型，iphone6 設備的寬是 750，我們的設計稿也是這樣。
但是 Vant 建議設置為 37.5，為什麼呢？
因為Vant是基於375寫的，所以如果你設置為75的話，Vant的樣式就小了一半。
所以如果設置為 37.5 的話，Vant 的樣式是沒有問題的，但是我們在測量設計數型稿的時候都必須除2才能使用，否則就會變得很大。
這樣做其實也沒有問題，但是有沒有更好的辦法呢？我蠢兄就想實現測量多少寫多少（不用換算）。於是聰明的你就想，可以不可以這樣來做？
如果是 Vant 的樣式，就把 rootValue 設置為 37.5 來轉換
如果是我們的樣式，就按照 75 的 rootValue 來轉換
通過 查閱文檔 我們可以看到 rootValue 支持兩種參數類型
數字：固定值
函數：動態計算返回
postcss-pxtorem 處理每個 CSS 文件的時候都會來調用這個函數
它會把被處理的 CSS 文件相關的信息通過參數傳遞給該函數
修改配置如下
/**
* PostCSS 配置文件
*/
mole.exports={
// 配置要使用的 PostCSS 插件
plugins: {
// 配置使用 autoprefixer 插件
// 作用：生成瀏覽器 CSS 樣式規則前綴
// VueCLI 內部已經配置了 autoprefixer 插件
// 所以又配置了一次，所以產生沖突了
// 'autoprefixer': { // autoprefixer 插件的配置
// // 配置要兼容到的環境信息
// browsers: ['Android >= 4.0', 'iOS >= 8']
// },
// 配置使用 postcss-pxtorem 插件
// 作用：把 px 轉為 rem
'postcss-pxtorem': {
rootValue({file}) {
returnfile.indexOf('vant')!==-1?37.5:75
},
propList: ['*']
}
}
}
其他
[Android]
>=4.0
[iOS]
>=8
具體語法請 參考這里
5. 配置完畢，把服務重啟一下，最後測試，very good
『拾』 移動端應該如何動態設置字體大小
em由來： font size of the root element，那麼rem是個單位，單位大小由它第一代老祖宗的font-size的大小決定。現在前端碼農們為了能在各個屏幕上看到一個健康的網頁在默默的犧牲著自己的健康，因為不僅要知道rem是個單位，更重要的是要知道怎賣梁么能在不同解析度下呈現的頁面都很NB。
事故造成原因：
1.px單位在PC上很流行，在手機屏幕上一看，MLGB的，同樣的12px卻小的跟螞蟻似的。
2.好不容易在iPhone4上調的正常了，換個菊花牌手機，MBD不堪入目了。
3.知道了rem的用法，但是html的font-size到底是多少才合適啊啊啊，媽蛋~。
好了，那麼現在來解決這些問題。
在解清亮決之前，麻煩各位大嬸要了解一些你可能不想了解的東東（警告：不了解這些就不能知道真相喲~）：
1. 物理像素(physical pixel)
我們看到的每個屏幕都是由一顆顆我們肉眼難以看到的小顆粒（物理像素）組成的。
2.邏輯像素
是計算機坐標系統中的一個點，這個點代表一個可以由程序使用的虛擬像素(比如說CSS像素)。
3.設備的像素比(device pixel ratio)簡稱DPR
它的數值體現了物理像素和邏輯像素之間的關系，用公式可以計算出該設備的DPR的大小：
那麼了解了上面這些概念，就可以知道，為什麼css在pc上寫著font-size=12px;但是換到手機上卻變小了？因為DPR啊啊啊，大哥~。
沒錯，我們在電腦屏幕上的DPR是1，但是手機卻不同，可能是它可能是2，也可能是3。獲取設備DPR的方法還是有的：
1.在JavaScript中，通過 window.devicePixelRatio 來獲取
2.在css中，可以通過 -webkit-device-pixel-ratio ， -webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 進行媒體查詢，對不同DPR的設備，做一些樣式適配(這里只針對webkit內核的瀏覽器和webview)。
本人也在網上看了不少動態設置rem的文章，下面把幾個常用的列舉出來：
一，用媒體查詢來設置html的font-size：
二、利用js來動態設置
我要說的是最後一種，也是我認答配寬為目前比較好的實現方法：
利用js計算當前設備的DPR，動態設置在html標簽上，並動態設置html的 font-size ，利用css的選擇器根據DPR來設置不同DPR下的字體大小（這個方法很不錯哦~）
忘了說了，手機淘寶很多頁面用的就是這種方法來適配終端的。
轉自 https://segmentfault.com/a/1190000004189237?_ea=522147