亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue大屏自適應(yīng)的實(shí)現(xiàn)方法(cv就能用)

 更新時(shí)間：2022年06月02日 09:59:12   作者：萬(wàn)萬(wàn)沒(méi)想到_  
最近在用VUE寫(xiě)大屏頁(yè)面,遇到屏幕自適應(yīng)問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue大屏自適應(yīng)的實(shí)現(xiàn)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

第一次接觸大屏，領(lǐng)導(dǎo)給任務(wù)，讓適配大小屏幕，然后我就面向百度了hhhh，看了很多版本都不太一樣，于是我自己總結(jié)了一份，奶媽式教程，手把手教學(xué)，直接cv就可以用，這個(gè)方法也可以用來(lái)做移動(dòng)端適配，只需要把 postcss.config.js文件里的大小改成移動(dòng)端的設(shè)計(jì)稿大小/10，移動(dòng)端俺沒(méi)有實(shí)踐過(guò)，小伙伴們需要的話(huà)可以試試哦，不出意外的話(huà)是沒(méi)問(wèn)題的吼吼

大屏

第一步：先下包，這里用到lib-flexible和postcss-pxtorem

直接下載postcss-pxtorem的話(huà)會(huì)報(bào)錯(cuò)，所以這里我們下載指定版本postcss-pxtorem@5.1.1

npm下載

npm install lib-flexible --save-dev

postcss-pxtorem：自動(dòng)把px轉(zhuǎn)成rmm

npm install postcss-pxtorem@5.1.1 --save-dev

yarn 下載

yarn add lib-flexible

yarn add postcss-pxtorem@5.1.1

第二步：在main.js引入

import 'lib-flexible'

第三步：修改lib-flexible源文件配置

修改node_modules里lib-flexible里flexible.js，找到refreshRem 函數(shù)修改：

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr < 540) {
            width = 540 * dpr;
        }else if(width / dpr > 1980){
            width = 1980 * dpr
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

注意：這里只需要修改屏幕最大寬度和最小寬度即可（540和1980）

第四步：在vue.config.js里配置

module.exports = {
css: {
    sourceMap: false,
    loaderOptions: {
      css: {
        // options here will be passed to css-loader
      },
      postcss: {
        // options here will be passed to postcss-loader
      },
    },
  },
 }

第五步：在vue.config.js同級(jí)新建postcss.config.js

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 192,
      propList: ['*'],
    },
  },
}

注意：這里的rootValue可以根據(jù)設(shè)計(jì)稿的大小/10即可

最后重新 npm run dev 或 yarn dev就ok啦

但是要注意，如果刪除了node_modules的依賴(lài)，重新下載之后還是需要重新修改配置文件

總結(jié)

到此這篇關(guān)于vue大屏自適應(yīng)實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue大屏自適應(yīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論