1，先看看網(wǎng)上關(guān)于移動(dòng)端適配講解
再聊移動(dòng)端頁面適配，rem和vw適配方案翘悉！
基礎(chǔ)點(diǎn)：rem相對(duì)根節(jié)點(diǎn)<html>字體的大小蔫敲。所以不用px;
根字體：<html>字體的大小px;
px：你就當(dāng)成cm(厘米)這樣的東西吧；
基準(zhǔn)：750設(shè)計(jì)稿痘拆；
這是方案的基礎(chǔ)理論，在這個(gè)基礎(chǔ)上，我們還要搞明白叫搁，到底要干一件什么事情！
目標(biāo)一 供炎、手機(jī)適配：就是頁面上的尺寸渴逻，無論高度，還是寬度音诫，還有字體惨奕，隨屏幕的寬度變化！這里是屏幕寬度竭钝！是不是想到了vw梨撞，對(duì)，就是這個(gè)意思香罐；——最大程度在各個(gè)尺寸屏幕上還原設(shè)計(jì)稿
目標(biāo)二卧波、px轉(zhuǎn)換成rem：一般UI給的設(shè)計(jì)稿寬度大小是750，所以庇茫，我們想直接寫上面UI標(biāo)記的尺寸港粱；——最大程度減少工作
為什么選擇rem?
很久之前沒有vw，怕vw的兼容問題旦签，就用了rem查坪；也就是：rem的兼容性>vw的兼容性；
還有一種就是自己寫百分比很不優(yōu)雅
一顷霹、理論基礎(chǔ)咪惠！
實(shí)現(xiàn)目標(biāo)一
用rem就可以了吧！因?yàn)閞em就可以隨根字體大小改變而改變淋淀，從而實(shí)現(xiàn)了自適應(yīng)的功能遥昧。
但是覆醇，但是，重點(diǎn)來炭臭，如果永脓，根字體的大小默認(rèn)是16px；那么鞋仍，我們的1rem常摧；就永遠(yuǎn)是16px，懂么威创？也就是如果設(shè)計(jì)稿是750（放大了一倍落午，iphone是375pt),我們想要個(gè)50%的大小:
50%*357px/16=11.718rem
如果我們寫一個(gè)11.718rem的寬度，然而這只能在能iphone6還原設(shè)計(jì)稿肚豺，也就是只有在iphone6上這樣的寬度才剛好占一半溃斋；
那么問題來了，如果在每個(gè)屏幕上都是50%呢吸申，直接改變根字體大泄＝佟（16px)不就完了么！＝夭辍梳侨；11.718rem永遠(yuǎn)還是那個(gè)11.718rem，不用擔(dān)心日丹；
實(shí)現(xiàn)目標(biāo)二走哺、
用工具，webpack聚凹，postcss,postcss-pxtorem
二割坠、準(zhǔn)備主要工具！
viewport: 建議自行百度妒牙；
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
vue-cli: 用這個(gè)主要是用webpack,這個(gè)構(gòu)建工具大大降低了webpack的使用難度;快速構(gòu)建出一個(gè)前端項(xiàng)目彼哼。
postcss: 官網(wǎng)解釋：PostCSS is a tool for transforming styles with JS plugins，就是postcss用js插件幫你轉(zhuǎn)換css樣式的一個(gè)工具湘今。比如敢朱，這里的把你的文件里面16px替換成1rem(根大小默認(rèn)16px的情況）；這樣你就不用自己去算了摩瞎！
postcss-pxtorem: postcss的一個(gè)插件拴签，主要是幫你把px轉(zhuǎn)換成對(duì)應(yīng)的rem；
然后：還要用js代碼去動(dòng)態(tài)算根目錄應(yīng)該有的字體大小旗们，反正就是一段js代碼去動(dòng)態(tài)獲取屏幕寬度蚓哩！
三、rem——開始干上渴！
第一步岸梨，先用vue-cli快速構(gòu)建出一個(gè)項(xiàng)目喜颁，然后，安裝postcss曹阔，postcss-pxtorem半开，postcss-loader，postcss-import赃份，postcss-url寂拆；
第二步，在項(xiàng)目根目錄下添加.postcssrc.js文件抓韩，在里面寫上
module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 32, propList: ['*'], minPixelValue: 2 } }};
rootValue纠永，這里就是根目錄的字體大小是32px，這里為啥設(shè)置成32呢园蝠，因?yàn)橐话阍O(shè)計(jì)稿是750渺蒿，比iphone6的大一倍，所以設(shè)置成16的兩倍彪薛，就是32px;proplist就是那些屬性需要轉(zhuǎn)換成rem，這里是全部的意思怠蹂；
比如你可選擇設(shè)置善延； propList: ['font', 'font-size', 'line-height', 'letter-spacing']
minPixelValue就是最小轉(zhuǎn)換單位，這是最小轉(zhuǎn)換單位是2px的意思城侧；
第三步易遣，動(dòng)態(tài)設(shè)置根字體大小嫌佑！一段簡單的js插入在head里面豆茫；
(function() {
function autoRootFontSize() {
document.documentElement.style.fontSize = Math.min(screen.width,document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';
// 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750屋摇，乘以32揩魂；懂的起撒，就是原本是750大小的32px;如果屏幕大小變成了375px,那么字體就是16px;也就是根字體fontSize大小和屏幕大小成正比變化炮温！是不是很簡單
}
window.addEventListener('resize', autoRootFontSize);
autoRootFontSize();
})();
這里火脉，我想說的是完全可以用vw去設(shè)置根字體大小，26px/375px=4.267vw;就不用js去算了柒啤！
html{font-size:4.267vw}; //因?yàn)檫@個(gè)字體大小完全是隨屏幕正比變化倦挂；
四、vw——開始干担巩！
vw的方案就簡單多了方援，因?yàn)関w本來就相對(duì)屏幕的百分比，所以我們不用再去動(dòng)態(tài)的改變根字體大小了涛癌，只需要把750上的px大小轉(zhuǎn)換成對(duì)應(yīng)的vw值就完了犯戏，這一步交給postcss工具就可以窥浪！
所以只需要兩步！
第一步笛丙，先用vue-cli快速構(gòu)建出一個(gè)項(xiàng)目漾脂，然后，安裝postcss胚鸯，postcss-pxtorem骨稿，postcss-loader，postcss-import姜钳，postcss-url
第二步坦冠，在項(xiàng)目根目錄下添加.postcssrc.js文件，在里面寫上
module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {}, "postcss-write-svg": { utf8: false }, "postcss-cssnext": {}, "postcss-px-to-viewport": { viewportWidth: 750, unitPrecision: 3, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'], minPixelValue: 1, mediaQuery: false }, "postcss-viewport-units": {}, }}
viewportWidth是你設(shè)計(jì)稿的大小750哥桥，然后unitPrecision是vw值保留的小數(shù)點(diǎn)個(gè)數(shù)辙浑；
五、總結(jié)拟糕！
首先明白一件事：px就像cm一樣判呕，1px永遠(yuǎn)是1px;1cm永遠(yuǎn)是1cm；
那么我們從目標(biāo)再反推一道邏輯：
我們想要的結(jié)果很簡單: 一個(gè)元素的寬度（px) / 屏幕寬度(px) = 定值 （這個(gè)定值就是設(shè)計(jì)稿上面的值比例定值）送滞；
——所以要做就是：屏幕變寬侠草，要讓元素寬度就變寬。
然鵝犁嗅，我們寫的代碼里面的px是不可能變的（取的750設(shè)計(jì)稿上面的尺寸）边涕；那么postcss編譯出來的rem值也是不變的；
我們是怎么把設(shè)計(jì)稿里面的40px換算成相應(yīng)rem的呢褂微；你只要記住根字體大小的值（瀏覽器的默認(rèn)是16px功蜓，現(xiàn)在設(shè)置成的32px)就是1rem；這交給工具同一去算宠蚂；
得到：元素的寬度(px) = 元素的寬度（rem) ??32; 所以這個(gè)32是你必須要設(shè)置在postcss-pxtorem里面的式撼；這樣它就可以幫你算；
又因?yàn)椋? 元素的寬度(rem) ?? 根字體大蟹适浮（px) = 元素的寬度（px)
元素的寬度（px) 變大端衰， 元素的寬度(rem) 不變，那就只有改變根字體大懈矢摹（px) 旅东，變大；具體怎么變十艾，上面的js代碼已經(jīng)解釋了抵代；
——所以我們做的就是：屏幕變寬，讓根字體大型怠（px) 變寬荤牍，元素寬度就變寬案腺。
750屏幕下是寫的樣式大小是1:1, 所以
又因?yàn)槲覀兿胍焊煮w大小（px) / 屏幕寬度(px) = 32 / 750
所以： 根字體大锌党场（px) = 32 / 750 ?? 屏幕寬度(px)
一個(gè)元素的寬度（px) / 屏幕寬度(px) = 定值
→ 根字體大信ァ（px) ??元素的寬度（rem）/ 屏幕寬度(px)
→ 32 / 750 ?? 屏幕寬度(px) ??元素的寬度（rem）/ 屏幕寬度(px) 等于什么？晦嵌？
得到的的是一個(gè)與屏幕大小無關(guān)的定值同辣！
化簡： 元素的寬度（rem）??32 / 750 = 元素的寬度（px) / 750 ——不就是設(shè)計(jì)稿上面的比例么！２言亍旱函！
驗(yàn)證以上操作出來的結(jié)果是否符合預(yù)期也很簡單：
比如一個(gè)img的寬，高描滔，在iphone6上的尺寸（審查元素的大邪舴痢！px單位）：
根字體:16px; postcss算出來的rem值是2.5rem; 2.516=40px; 實(shí)際上也是40px;
——得到元素實(shí)際大小 40??40（px), 屏寬是375含长；比例是40/375=0.10667;
在iphone5上的尺寸（審查元素的大腥弧！px單位）：
根字體：13.6533px; postcss算出來的rem值是2.5rem; 2.513.6533=34.13px; 實(shí)際上也是34.13px;
——得到元素實(shí)際大小 34.13??34.13（px), 屏寬是320茎芋；比例是34.13/320=0.10665;
2颅眶，自己項(xiàng)目適配配置(實(shí)踐)
上的文章講的理論和方法是可行的，自己項(xiàng)目的解決方案和他大同小異（主要用rem）：
1田弥，插件：amfe-flexible + postcss-px2rem
amfe-flexible：自動(dòng)根據(jù)不同設(shè)備改變data-dpr的值，這樣就可以根據(jù)不同的data-dpr設(shè)置字體大小不變铡原，僅放大相應(yīng)倍數(shù)偷厦。
postcss-px2rem：打包的時(shí)候把項(xiàng)目里面的px統(tǒng)一轉(zhuǎn)換成rem，轉(zhuǎn)換的基準(zhǔn)值根據(jù)配置設(shè)置的（.postcssrc.js）
/因?yàn)槲沂且?50px(iphone6)寬度為基準(zhǔn)燕刻，所以remUnit為37.5/
經(jīng)過試驗(yàn)結(jié)果：
postcss-px2rem：只負(fù)責(zé)把項(xiàng)目里面的px按照基準(zhǔn)值轉(zhuǎn)換成rem只泼，并不負(fù)責(zé)根節(jié)點(diǎn)動(dòng)態(tài)font-size的計(jì)算。
例如卵洗，代碼里面有個(gè)高度固定：180px请唱， 基準(zhǔn)值是：37.5， 那最后界面上的rem=180/37.5=4.8rem
不管換不同客戶端手機(jī)过蹂，不同分辨率十绑，界面上都是固定4.8rem【rem的值是固定的，根據(jù)根節(jié)點(diǎn)的font-size不同酷勺，在界面顯示的px也不同】本橙，界面上顯示的px = 16（沒有設(shè)置font-size的話默認(rèn)是16px）* 4.8rem = 76.8px
【那么這個(gè)基準(zhǔn)值：37.5怎么來的：
rem基準(zhǔn)值計(jì)算
關(guān)于rem的基準(zhǔn)值,也就是上面那個(gè)37.5px其實(shí)是根據(jù)我們所拿到的視覺稿來決定的,主要有以下幾點(diǎn)原因:
1.由于我們所寫出的頁面是要在不同的屏幕大小設(shè)備上運(yùn)行的,所以我們?cè)趯憳邮降臅r(shí)候必須要先以一個(gè)確定的屏幕來作為參考,這個(gè)就由我們拿到的視覺稿來定;假如我們拿到的視覺稿是以iphone6的屏幕width=375px為基準(zhǔn):
ar docEl = document.documentElement;
var width = docEl.getBoundingClientRect().width;
var rem = width / 10;
這樣計(jì)算出來的rem基準(zhǔn)值就是37.5(iphone6的視覺稿),這里為什么要除以10呢,其實(shí)這個(gè)值是隨便定義的,因?yàn)椴幌胱宧tml的font-size太大,當(dāng)然也可以選擇不除,只要在后面動(dòng)態(tài)js計(jì)算時(shí)保證一樣的值就可以
】
上面的組件只負(fù)責(zé)轉(zhuǎn)換rem，并沒有根據(jù)不同設(shè)備設(shè)置font-size脆诉，下面再加入這個(gè)組件amfe-flexible:
不同設(shè)備下的font-size不同甚亭。
