vue移動端的自適應佈局的兩種解決方案

kkxiaojun發表於2019-03-28
Vue

目標: 前端開發移動端及H5時候，不需要再關心移動裝置的大小，只需要按照固定 設計稿的px值佈局

基礎知識

dpr（裝置畫素比）

css的畫素px不等於裝置畫素/解析度/各種值，css的px可以簡單理解為虛擬 畫素，與裝置無關，css的px需要乘dpr計算為裝置畫素；

幾個移動端常用的單位rem、vw、vh，配合傳統的px、百分比、標籤 ，相容適配移動端的各種解析度的手機端。 單位簡介

rem

顧名思義，root emphasize，根元素(html)的font-size

vw

螢幕寬度相關，1vw是螢幕寬度的1%

vh

螢幕高度相關，1vh是螢幕高度的1%

Vue-cli專案，rem解決方案

最近做移動端，用Vue結合lib-flexible和px2rem-loader做移動端的網頁適配

Vue結合lib-flexible和px2rem-loader地址

flexible

  • 動態改寫meta標籤
  • 給元素新增data-dpr屬性，並動態改寫data-dpr的值
  • 給元素新增font-size屬性，並動態改寫font-size的值

px2rem

將px轉化為rem

vue-cli新增flexible

    npm install lib-flexible

    // 在main.js中引入
    import 'lib-flexible'
複製程式碼

vue-cli新增px2rem-loader

在build/util.js中

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 64 //設計稿寬度/10
    }
  }
  // generate loader string to be used with extract text plugin
  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
        })
      })
    }
複製程式碼

vue-cli,vw解決方案

如何在Vue專案中使用vw實現移動端適配

專案地址

相關文章