vue2.0适配pc端

最新推荐文章于 2024-05-06 20:31:41 发布

两季烟雨凉

最新推荐文章于 2024-05-06 20:31:41 发布

阅读量432

点赞数 1

CC 4.0 BY-SA版权

原文链接：https://www.it610.com/article/1292005340744851456.htm，https://blog.youkuaiyun.com/Acitylion/article/details/120165700

方法一：
1.加载px2rem-loader依赖包

npm install px2rem-loader

2.自定义js文件：

window.onload = function (){
	getRem(1920,100)
}

function getRem (pWidth,pRem){
	let html = document.getElementsByTagName('html')[0]
	let oWidth = document.body.clientWidth || document.documentElement.clientWidth
  html.style.fontSize = oWidth / pWidth * pRem + 'px'
}

3.在main.js中引用

import './assets/js/rem'

4.在build/utils的cssLoaders中添加px2remLoader：

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 100
    }
};
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

方法二：
1.安装依赖

npm install px2rem-loader -D 
npm install lib-flexible -S

2.在main.js引用

import 'lib-flexible'

3.在build/utils的cssLoaders中添加px2remLoader：

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192,  //根据视觉稿，rem为px的十分之一，1920px  192 rem
      // remPrecision: 8//换算的rem保留几位小数点
    }
}

//放进loaders数组中
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
       })
     })
   }
   //...
 }

4.修改flexible.js
node_moudles/lib-flexible/flexible.js 修改：

function refreshRem(){
   var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        width = width * dpr;
    }
    //缩放比例，可按实际情况修改
    var rem = width / 8;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}