現(xiàn)在回過頭來看战转，感覺自己以前寫復(fù)雜了，其實(shí)道理很簡單以躯；
就是利用vw槐秧，rem隨屏幕，或者跟字體正比變化的特性忧设；
1.就是開發(fā)的時(shí)候用的750設(shè)計(jì)稿的尺寸刁标；單位是px；
2.然后編譯工具址晕，如postcss 會自動將px單位轉(zhuǎn)成對應(yīng)rem和vw單位膀懈；
3.如果是vw很好轉(zhuǎn)轉(zhuǎn)行，比如寫的40px谨垃；40/750 vw就完了启搂；
4.如果是rem就多一步罷了；要用js計(jì)算出根字體大小刘陶，并設(shè)置給html胳赌；
正常是 375 ，16px;所以比例常數(shù)就是 :? ? 屏幕尺寸/750*32 匙隔，也就是html?根字體?大幸缮弧；
e.g : postcss將40px轉(zhuǎn)化成rem單位纷责； 1rem/(屏幕尺寸/750*32) = x/40
x 就等于 40/(屏幕尺寸/750*32)? ?rem;
動態(tài)改變(屏幕尺寸/750*32) 這個(gè)?根字體?就可以動態(tài)適應(yīng)屏幕了捍掺！
看了一周的rem手機(jī)適配方案；搞的腦殼痛碰逸；現(xiàn)在總于搞明白了乡小！建議一次性看完本片文章再去百度相關(guān)知識點(diǎn)！不要離開饵史！
基礎(chǔ)點(diǎn)：rem相對根節(jié)點(diǎn)<html>字體的大小满钟。所以不用px;
根字體：<html>字體的大小px;
px：你就當(dāng)成cm(厘米)這樣的東西吧；
基準(zhǔn)：750設(shè)計(jì)稿胳喷；
這是方案的基礎(chǔ)理論湃番，在這個(gè)基礎(chǔ)上，我們還要搞明白吭露，到底要干一件什么事情吠撮！
目標(biāo)一 、手機(jī)適配：就是頁面上的尺寸讲竿，無論高度泥兰，還是寬度弄屡，還有字體，隨屏幕的寬度變化鞋诗！這里是屏幕寬度膀捷！是不是想到了vw，對削彬，就是這個(gè)意思全庸；——最大程度在各個(gè)尺寸屏幕上還原設(shè)計(jì)稿
目標(biāo)二、px轉(zhuǎn)換成rem：一般UI給的設(shè)計(jì)稿寬度大小是750融痛，所以壶笼，我們想直接寫上面UI標(biāo)記的尺寸；——最大程度減少工作
為什么選擇rem?
很久之前沒有vw雁刷，怕vw的兼容問題覆劈，就用了rem；也就是：rem的兼容性>vw的兼容性安券；（vw的適配方案墩崩！非常簡單！）侯勉；
還有一種就是自己寫百分比，不但要自己算哭铝阐，而且很不優(yōu)雅（我以前就是這樣干的址貌，有時(shí)候?yàn)榱俗尭叨群蛯挾鹊陌俜直纫粯樱疫€把高度寫成0徘键，{padding:40%,width:40%,height:0}）练对。
一、理論基礎(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)換成對應(yīng)的rem听隐；
然后：還要用js代碼去動態(tài)算根目錄應(yīng)該有的字體大小，反正就是一段js代碼去動態(tài)獲取屏幕寬度哄啄！
超級麻煩的一種方案推薦：（可以自己用淘寶彈性布局方案lib-flexible實(shí)踐; 或者看flexible.js 移動端自適應(yīng)方案 - 簡書雅任；其實(shí)這js的作用就是幫你根據(jù)屏幕大小——動態(tài)改變根字體大小和data-dpr值！但是rem的值還是要你自己算哦增淹，或者用其他工具４环谩）
三、rem——開始干虑润！
第一步成玫，先用vue-cli快速構(gòu)建出一個(gè)項(xiàng)目，然后，安裝postcss哭当，postcss-pxtorem猪腕，postcss-loader，postcss-import钦勘，postcss-url陋葡；看不懂的同學(xué)看這個(gè)吧（如何在Vue項(xiàng)目中使用vw實(shí)現(xiàn)移動端適配(轉(zhuǎn)) - 簡書）
第二步，在項(xiàng)目根目錄下添加.postcssrc.js文件彻采，在里面寫上
module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 32, propList: ['*'], minPixelValue: 2 } }};
就完了腐缤。簡單解釋下，免得你們百度半天肛响，建議自己在npm官網(wǎng)上看postcss-pxtorem的文檔岭粤。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的意思堤如；
第三步适揉，動態(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本來就相對屏幕的百分比，所以我們不用再去動態(tài)的改變根字體大小了袜漩，只需要把750上的px大小轉(zhuǎn)換成對應(yīng)的vw值就完了绪爸，這一步交給postcss工具就可以！
所以只需要兩步宙攻！
第一步奠货，先用vue-cli快速構(gòu)建出一個(gè)項(xiàng)目，然后座掘，安裝postcss递惋，postcss-pxtorem，postcss-loader溢陪，postcss-import萍虽，postcss-url；看不懂的同學(xué)看這個(gè)吧（如何在Vue項(xiàng)目中使用vw實(shí)現(xiàn)移動端適配(轉(zhuǎn)) - 簡書）
第二步嬉愧，在項(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)槲覀兿胍?i>：根字體大小（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.5*16=40px;? ? 實(shí)際上也是40px;
——得到元素實(shí)際大小 40??40（px),? 屏寬是375；比例是40/375=0.10667;
在iphone5上的尺寸（審查元素的大懈苋恕些侍！px單位）：
根字體：13.6533px; postcss算出來的rem值是2.5rem;? ? 2.5*13.6533=34.13px;? ? 實(shí)際上也是34.13px;
——得到元素實(shí)際大小 34.13??34.13（px),? 屏寬是320苛预；比例是34.13/320=0.10665;
完美適配孵稽！
完結(jié)许起！
參考鏈接
如何在Vue項(xiàng)目中使用vw實(shí)現(xiàn)移動端適配_vw, Layout, 布局, Vue, mobile 教程_w3cplus
使用Flexible實(shí)現(xiàn)手淘H5頁面的終端適配_雙11前端技術(shù)連載, Layout, mobile 教程_w3cplus
再聊移動端頁面的適配_Layout, 布局, mobile, CSS 教程_w3cplus
參考鏈接這么健全，為啥我還要寫菩鲜。因?yàn)橐婚_始我浪費(fèi)了大量時(shí)間去研究一些無關(guān)知識园细！
就拿px像素，這個(gè)知識點(diǎn)來說接校，我都差點(diǎn)成為像素設(shè)備研究磚家了珊肃，什么物理像素，設(shè)備像素馅笙，設(shè)備獨(dú)立像素，CSS像素厉亏，設(shè)備像素比(device pixel ratio)......!人格都搞分裂了董习！
當(dāng)然最重要的是，分享的鏈接要付費(fèi)爱只！
