<tbody id="5vw1z"></tbody>
<rp id="5vw1z"></rp>
  •  

    Vue3項目中使用vw實現移動端適配

    記錄個人在Vue3項目中使用vw實現移動端適配,直接使用Vue官方提供的Vue-cli的構建工具來構建Vue項目。

    首先需要全局安裝Vue-cli:

    npm install -g vue-cli

    安裝完成后,就可以使用它來構建項目:

    vue create vw-vant

    根據命令提示做相應的操作(以下是我個人的配置):

    Vue CLI v3.11.0
    ┌───────────────────────────┐
    │  Update available: 4.1.1  │
    └───────────────────────────┘
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
    ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
    ? Pick a linter / formatter config: Standard
    ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
    ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
    ? Save this as a preset for future projects? (y/N)
    

    進入到剛創建的vw-vant:

    cd vw-layout

    這時,可以看到的項目結構如下:

    項目結構

    在vue-cli3中是沒有.postcssrc.js和vue.config.js的,需要自己創建。

    創建完成后需要安裝以下插件

     npm install postcss-import
     npm install postcss-url
     npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S   
     npm i cssnano-preset-advanced --save-dev
    

    安裝完成之后可以在package.json中查看是否安裝成功。

    在package.json中查看是否安裝成功

    完整的.postcssrc.js代碼如下:

    module.exports = {
      plugins: {
        "postcss-import": {},
        autoprefixer: {},
        "postcss-url": {},
        "postcss-aspect-ratio-mini": {},
        "postcss-write-svg": {
          utf8: false
        },
        'postcss-px-to-viewport': {
          unitToConvert: "px",
          viewportWidth: 375, // 視窗的寬度,對應的是我們設計稿的寬度,一般是750
          viewportHeight: 812, // 視窗的高度,根據750設備的寬度來指定,一般指定1334,也可以不配置
          unitPrecision: 3, // 指定`px`轉換為視窗單位值的小數位數(很多時候無法整除)
          viewportUnit: 'vw', // 指定需要轉換成的視窗單位,建議使用vw
          fontViewportUnit: "vw",
          selectorBlackList: ['.ig-'],  // <div class="ig-aa"></div> 指定不轉換為視窗單位的類,在該類型名下寫不會轉換為vw,可以無限添加,建議定義一至兩個通用的類名
          minPixelValue: 1, // 小于或等于`1px`不轉換為視窗單位,你也可以設置為你想要的值
          mediaQuery: false, // 允許在媒體查詢中轉換`px`
          replace: true,
          exclude: /(\/|\\)(node_modules)(\/|\\)/
        },
        'postcss-viewport-units': {
          filterRule: rule => rule.selector.includes('::after') && rule.selector.includes('::before')
        },
        "cssnano": {
          "cssnano-preset-advanced": {
            zindex: false,
            autoprefixer: false
          },
        }
      }
    }

    vw兼容方案

    我這里使用viewport的polyfill:Viewport Units Buggyfill。

    如何使用viewport-units-buggyfill?首先找到index.html,在頁面中引入下面的代碼完成了:

    <script src="http://g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
    

    vw兼容方案

    結語

    以上就是如何在Vue3項目中使用vw實現移動端適配方法,純屬個人總結,如果幫到你那再好不過了。

    「點點贊賞,手留余香」

    3

    給作者打賞,鼓勵TA抓緊創作!

    微信微信 支付寶支付寶

    還沒有人贊賞,快來當第一個贊賞的人吧!

    聲明:
    1. 本站所有文章教程及資源素材均來源于網絡與用戶分享或為本站原創,僅限用于學習和研究。
    2. 如果內容損害你的權益請聯系客服QQ:1642748312給予處理。
    碼云筆記 » Vue3項目中使用vw實現移動端適配

    發表回復

    IT互聯網行業相關廣告投放 更專業 更精準

    立即查看 聯系我們
    亚洲 自拍 另类小说综合图区