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

時間 2019-11-30

標籤 vue 移動端的自適應佈局兩種解決方案欄目無線简体版

原文原文鏈接

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

基礎知識

dpr（設備像素比）css

css的像素px不等於設備像素/分辨率/各類值，css的px能夠簡單理解爲虛擬像素，與設備無關，css的px須要乘dpr計算爲設備像素；html

幾個移動端經常使用的單位rem、vw、vh，配合傳統的px、百分比、標籤，兼容適配移動端的各類分辨率的手機端。單位簡介前端

remvue

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

vwgit

屏幕寬度相關，1vw是屏幕寬度的1%github

vhvue-cli

屏幕高度相關，1vh是屏幕高度的1%npm

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
        })
      })
    }
複製代碼