vue移動端h5適配解決方案(rem or vw)

方案一:amfe-flexible+px2rem-loader

amfe-flexible:根據(jù)設備寬度赔硫,修改根元素html的大小,以適配不同終端
px2rem-loader:將css中的px轉為rem單位,用了它就不用自己計算rem值了

注意:amfe-flexible是lib-flexible的優(yōu)化门怪,主要區(qū)別是amfe-flexible不會改變視口大小

安裝 + 配置

1. 安裝amfe-flexible和px2rem-loader
npm  install -s amfe-flexible
npm i px2rem-loader --save -dev
2. 配置amfe-flexible
// 入口文件main.js中引入
import 'amfe-flexible/index.js'
// 在index.html中修改meta
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

amfe-flexible干了什么呢痰憎?

  • 給元素動態(tài)改寫font-size的值
  • 設置1rem = viewWidth / 10
  • 設置頁面刷新時重置rem
  • 支持0.5px
3. 配置px2rem-loader
// build/utils.js
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75 //默認換算為1rem為75px票髓,可根據(jù)你的原型圖修改
    }
  }
// 在generateLoaders方法中添加px2remLoader
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }
4. 展示效果
  • iPhoneX(屏幕寬度為375px)

    image

  • iPhone6/7/8 plus(屏幕寬度為375px)

    image

  • iPad(屏幕寬度為768px)

    image

方案二:vw實現(xiàn)移動端適配

插件介紹

1. postcss-aspect-ratio-mini

主要用來處理元素容器寬高比。

如果我們想要做一個188:246(188是容器寬度铣耘,246是容器高度)這樣的比例容器洽沟,只需要這樣使用:

[w-188-246] {
  aspect-ratio: '188:246';
}

有一點需要特別注意:aspect-ratio屬性不能和其他屬性寫在一起,否則編譯出來的屬性只會留下aspect-ratio的值涡拘。主要是因為在插件中做了相應的處理玲躯,不在每次調用aspect-ratio時,生成前面指定的默認樣式代碼鳄乏,這樣代碼沒那么冗余跷车。所以在使用的時候,需要分開來寫:

// 編譯前
[w-188-246] {
  width: 188px;
  background-color: red;
}
[w-188-246] {
  aspect-ratio: '188:246';
}
// 編譯后
[w-188-246] {
  width: 25.067vw;
  background-color: red;
}
[w-188-246]:before {
  padding-top: 130.85106382978725%;
}
2. postcss-px-to-viewport

postcss-px-to-viewport主要用來把px單位轉換為vw橱野、vh朽缴、vmin或者vmax這樣的視窗單位。

目前出視覺設計稿水援,我們都是使用750px寬度的密强,那么100vw = 750px,即1vw = 7.5px蜗元。在不想要把px轉換為vw的時候或渤,首先在對應的元素(html)中添加配置中指定的類名.ignore或.hairlines(.hairlines一般用于設置border-width:0.5px的元素中)

// 編譯前
.test {
  border: .5px solid black;
  border-bottom-width: 4px;
  font-size: 14px;
  line-height: 20px;
  position: relative;
}
[w-188-246] {
  width: 188px;
}
// 編譯后
.test {
  border: .5px solid #000;
  border-bottom-width: .533vw;
  font-size: 1.867vw;
  line-height: 2.667vw;
  position: relative;
}
[w-188-246] {
  width: 25.067vw;
}
3. postcss-write-svg

postcss-write-svg插件主要使用的是border-image和background來做1px的相關處理。

  • border-image方式:
// 編譯前
@svg 1px-border {
  height: 2px;
  @rect {
    fill: var(--color, black);
    width: 100%;
    height: 50%;
  }
}
.example {
  border: 1px solid transparent;
  border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}
// 編譯后
.example {
  border: 1px solid transparent;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;
}
  • background-image方式:
// 編譯前
@svg square {
  @rect {
    fill: var(--color, black);
    width: 100%;
    height: 100%;
  }
}

#example {
  background: white svg(square param(--color #00b1ff));
}
// 編譯后
#example {
  background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E");
}
4. postcss-cssnext

主要用來讓我們使用CSS未來的特性奕扣,其會對這些特性做相關的兼容性處理薪鹦。

5. cssnano

cssnano主要用來壓縮和清理CSS代碼。在Webpack中,cssnano和css-loader捆綁在一起池磁,所以不需要自己加載它奔害。不過你也可以使用postcss-loader顯式的使用cssnano。

cssnano集成了一些其他的PostCSS插件地熄,如果你想禁用cssnano中的某個插件的時候华临,可以像下面這樣操作:

"cssnano": {
  autoprefixer: false,
  "postcss-zindex": false
}
6. postcss-viewport-units

postcss-viewport-units插件主要是給CSS的屬性添加content的屬性,配合viewport-units-buggyfill庫給vw端考、vh雅潭、vmin和vmax做適配的操作。

安裝 + 配置

1. 安裝PostCSS插件

默認PostCSS插件(通過Vue-cli構建的項目默認安裝了):

  • postcss-import:主要用來處理@import引入路徑問題跛梗。
  • postcss-url:主要用來處理文件寻馏,比如圖片文件、字體文件等引用路徑的處理核偿。
  • autoprefixer:主要用來處理瀏覽器前綴問題诚欠。
npm i postcss-import --S
npm i postcss-url --S   
npm i autoprefixer --S

其他PostCSS插件:

  • postcss-aspect-ratio-mini:主要用來處理元素容器寬高比。
  • postcss-px-to-viewport:主要用來把px單位轉換為vw漾岳、vh轰绵、vmin或者vmax這樣的視窗單位。
  • postcss-write-svg:主要使用的是border-image和background來做1px的相關處理尼荆。
  • postcss-cssnext:主要用來讓我們使用CSS未來的特性左腔,其會對這些特性做相關的兼容性處理。
  • cssnano:主要用來壓縮和清理CSS代碼捅儒。
  • postcss-viewport-units:主要用來給CSS的屬性添加content的屬性液样,配合viewport-units-buggyfill庫給vw、vh巧还、vmin和vmax做適配的操作鞭莽。
npm i postcss-aspect-ratio-mini --S
npm i postcss-px-to-viewport --S   
npm i postcss-write-svg --S   
npm i postcss-cssnext --S   
npm i postcss-viewport-units --S   
npm i cssnano --S
2. 配置PostCSS插件
// 根目錄下的.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,      // 視窗的寬度,對應的是我們設計稿的寬度麸祷,一般是750
      viewportHeight: 1334,    // 視窗的高度澎怒,根據(jù)750設備的寬度來指定,一般指定1334阶牍,也可以不配置
      unitPrecision: 3,        // 指定`px`轉換為視窗單位值的小數(shù)位數(shù)(很多時候無法整除)
      viewportUnit: 'vw',      // 指定需要轉換成的視窗單位喷面,建議使用vw
      selectorBlackList: ['.ignore', '.hairlines'],  // 指定不轉換為視窗單位的類,可以自定義走孽,可以無限添加,建議定義一至兩個通用的類名
      minPixelValue: 1,       // 小于或等于`1px`不轉換為視窗單位惧辈,你也可以設置為你想要的值
      mediaQuery: false       // 允許在媒體查詢中轉換`px`
    } 
    "postcss-viewport-units":{},
    "cssnano": {
      "cssnano-preset-advanced": {
        zindex: false,
        autoprefixer: false
      },
    }
  }
}
// 在index.html中修改meta
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />

什么情況下適合使用vw呢?

  • 容器適配磕瓷,可以使用vw
  • 文本的適配盒齿,可以使用vw
  • 大于1px的邊框、圓角、陰影都可以使用vw
  • 內距和外距县昂,可以使用vw
3. 展示效果
  • iPhoneX(屏幕寬度為375px)

    image

  • iPhone6/7/8 plus(屏幕寬度為375px)

image
  • iPad(屏幕寬度為768px)
    image

方案三:rem + vw (結合方案一和方案二)

參考文檔

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市陷舅,隨后出現(xiàn)的幾起案子倒彰,更是在濱河造成了極大的恐慌,老刑警劉巖莱睁,帶你破解...
    沈念sama閱讀 219,110評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件待讳,死亡現(xiàn)場離奇詭異,居然都是意外死亡仰剿,警方通過查閱死者的電腦和手機创淡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,443評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來南吮,“玉大人琳彩,你說我怎么就攤上這事〔看眨” “怎么了露乏?”我有些...
    開封第一講書人閱讀 165,474評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長涂邀。 經(jīng)常有香客問我瘟仿,道長,這世上最難降的妖魔是什么比勉? 我笑而不...
    開封第一講書人閱讀 58,881評論 1 295
  • 正文 為了忘掉前任劳较,我火速辦了婚禮,結果婚禮上浩聋,老公的妹妹穿的比我還像新娘观蜗。我一直安慰自己,他們只是感情好赡勘,可當我...
    茶點故事閱讀 67,902評論 6 392
  • 文/花漫 我一把揭開白布嫂便。 她就那樣靜靜地躺著,像睡著了一般闸与。 火紅的嫁衣襯著肌膚如雪毙替。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,698評論 1 305
  • 那天践樱,我揣著相機與錄音厂画,去河邊找鬼。 笑死拷邢,一個胖子當著我的面吹牛袱院,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 40,418評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼忽洛,長吁一口氣:“原來是場噩夢啊……” “哼腻惠!你這毒婦竟也來了?” 一聲冷哼從身側響起欲虚,我...
    開封第一講書人閱讀 39,332評論 0 276
  • 序言:老撾萬榮一對情侶失蹤集灌,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后复哆,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體欣喧,經(jīng)...
    沈念sama閱讀 45,796評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,968評論 3 337
  • 正文 我和宋清朗相戀三年梯找,在試婚紗的時候發(fā)現(xiàn)自己被綠了唆阿。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,110評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡锈锤,死狀恐怖驯鳖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情牙咏,我是刑警寧澤臼隔,帶...
    沈念sama閱讀 35,792評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站妄壶,受9級特大地震影響摔握,放射性物質發(fā)生泄漏。R本人自食惡果不足惜丁寄,卻給世界環(huán)境...
    茶點故事閱讀 41,455評論 3 331
  • 文/蒙蒙 一氨淌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧伊磺,春花似錦盛正、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,003評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至摘能,卻和暖如春续崖,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背团搞。 一陣腳步聲響...
    開封第一講書人閱讀 33,130評論 1 272
  • 我被黑心中介騙來泰國打工严望, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人逻恐。 一個月前我還...
    沈念sama閱讀 48,348評論 3 373
  • 正文 我出身青樓像吻,卻偏偏與公主長得像峻黍,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子拨匆,可洞房花燭夜當晚...
    茶點故事閱讀 45,047評論 2 355

推薦閱讀更多精彩內容