vue移動端rem實現(xiàn)自適應布局(手動封裝和flexible)

1.手動封裝rem.js

  1. 在public文件夾中創(chuàng)建rem.js文件,寫入封裝rem的代碼
    2.在app.vue中引入rem.js睛藻,并在vue生命周期內(nèi)調(diào)用
public => rem.js
function resize() {
  //  獲取html的寬度
  let htmlW = document.documentElement.clientWidth;
  // 獲取body的寬度
  let bodyW = document.body.clientWidth;
  // 兼容處理
  let W = htmlW || bodyW;

  // 設(shè)置html的font-size大小
  // 因為設(shè)計圖尺寸是750,所以平分坑质,這樣*10之后,1rem就等于10px;
  // 這樣設(shè)置 750px尺寸下扒披,1rem=10px   寫代碼的時候尺寸根據(jù)這個算
  //屏幕在放大或縮小時 1rem的值也會等比例放大或縮小
  document.documentElement.style.fontSize = (W / 750) * 10 + "px";
}
export { resize };
app.vue
<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
import { resize } from "../public/rem";
export default {
  created() {
      //當屏幕尺寸發(fā)生變化慎框,調(diào)用函數(shù)重新計算rem
     window.onresize = function () {
       resize();
     };
     // 設(shè)置初始觸發(fā)一次
     resize();
   },
};
</script>

2.postcss-pxtorem和lib-flexible插件搭配實現(xiàn)

1.安裝
    //npm方法下載 cnpm也一樣
    npm install lib-flexible postcss-pxtorem --save

    //yarn方法下載
    yarn add lib-flexible postcss-pxtorem --save

postcss-pxtorem:會將px轉(zhuǎn)換為rem用于適配不同寬度的屏幕膜毁,根據(jù)標簽的font-size值來計算出結(jié)果,即1rem=html標簽的font-size值
lib-flexible:用于設(shè)置 rem 基準值

2.在main.js中引入flexible
import 'lib-flexible'
3.配置flexible张足,在根目錄下創(chuàng)建postcss.config.js文件
// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    "postcss-pxtorem": {
      rootValue({ file }) {
        //如果是vant文件則1rem=37.5;如果非vant文件則為1rem=75;
        //因為vant組件的設(shè)計圖為375触创;而目前項目主流設(shè)計稿寬度為750
        return file.indexOf("vant") !== -1 ? 37.5 : 75;
      },
      propList: ["*"],
    },
  },
};
/*flexible的原理是把屏幕分成10份數(shù),比如蘋果6,屏幕的寬度是375,html的fontSize為37.5px,2rem就是75px,*/
/*如果切換成蘋果5,屏幕的寬度為320,html的fontSize為32px,那么你設(shè)置的2rem就是64px*/
// lib-flexible中的 默認縮放比例值 * postcss的rootValue必須等于設(shè)計稿的寬度,而lib-flexible默認的縮放比例值就為10为牍,或者自定義的lib-flexible可以自己隨便定義哼绑,這時候一定要動態(tài)修改postcss的rootValue的值

4.配置完之后,寫項目的時候顺饮,正常按設(shè)計稿的寬度用px單位寫;postcss-pxtorem會自動將px轉(zhuǎn)為rem凌那, 而flexible會根據(jù)屏幕大小自動重新計算rem的值
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末兼雄,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子帽蝶,更是在濱河造成了極大的恐慌赦肋,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,843評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件励稳,死亡現(xiàn)場離奇詭異佃乘,居然都是意外死亡,警方通過查閱死者的電腦和手機驹尼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評論 3 392
  • 文/潘曉璐 我一進店門趣避,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人新翎,你說我怎么就攤上這事程帕。” “怎么了地啰?”我有些...
    開封第一講書人閱讀 163,187評論 0 353
  • 文/不壞的土叔 我叫張陵愁拭,是天一觀的道長。 經(jīng)常有香客問我亏吝,道長岭埠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,264評論 1 292
  • 正文 為了忘掉前任蔚鸥,我火速辦了婚禮惜论,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘止喷。我一直安慰自己馆类,他們只是感情好,可當我...
    茶點故事閱讀 67,289評論 6 390
  • 文/花漫 我一把揭開白布启盛。 她就那樣靜靜地躺著蹦掐,像睡著了一般。 火紅的嫁衣襯著肌膚如雪僵闯。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,231評論 1 299
  • 那天藤滥,我揣著相機與錄音鳖粟,去河邊找鬼。 笑死拙绊,一個胖子當著我的面吹牛向图,可吹牛的內(nèi)容都是我干的泳秀。 我是一名探鬼主播,決...
    沈念sama閱讀 40,116評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼榄攀,長吁一口氣:“原來是場噩夢啊……” “哼嗜傅!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起檩赢,我...
    開封第一講書人閱讀 38,945評論 0 275
  • 序言:老撾萬榮一對情侶失蹤吕嘀,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后贞瞒,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體偶房,經(jīng)...
    沈念sama閱讀 45,367評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,581評論 2 333
  • 正文 我和宋清朗相戀三年军浆,在試婚紗的時候發(fā)現(xiàn)自己被綠了棕洋。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,754評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡乒融,死狀恐怖掰盘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情赞季,我是刑警寧澤庆杜,帶...
    沈念sama閱讀 35,458評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站碟摆,受9級特大地震影響晃财,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜典蜕,卻給世界環(huán)境...
    茶點故事閱讀 41,068評論 3 327
  • 文/蒙蒙 一断盛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧愉舔,春花似錦钢猛、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至火的,卻和暖如春壶愤,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背馏鹤。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評論 1 269
  • 我被黑心中介騙來泰國打工征椒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人湃累。 一個月前我還...
    沈念sama閱讀 47,797評論 2 369
  • 正文 我出身青樓勃救,卻偏偏與公主長得像碍讨,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蒙秒,可洞房花燭夜當晚...
    茶點故事閱讀 44,654評論 2 354