VUE2.X 使用lib-flexible px2rem-loader 实现1920*1080下的等比缩小

VUE2.X 使用lib-flexible px2rem-loader 实现1920*1080下的等比缩小

技术杂谈小彩虹2021-07-09 10:22:49130A+A-

效果

解决.gif

先用脚手架安装基础框架 并实现一个水平居中的效果 如下图所示

步骤1.png

结构目录如下

image.png

reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

demo.vue

<template>

  <div class="demo"> <div class="bigBox"> <div class="smallBox"></div> </div> </div>

</template>

<script > </script>

<style> .demo{ height:100vh; display: flex; justify-content: center; align-items: center; } .bigBox{ width:400px; height:400px; background:pink; display: flex; justify-content: center; align-items: center; } .bigBox>.smallBox{ width:200px; height:200px; background:blue; } </style>

现在拖动屏幕是没效果的 应该是这样

问题1.gif

安装 lib-flexible(px转换成rem)

npm install lib-flexible --save-dev

引入 lib-flexible

main.js中引入lib-flexible

import 'lib-flexible'
import '@/assets/css/reset.css' 

接下来会看着这个问题

注:html的font-size为 宽度/10 即正常

手机端的font-size是正常的

手机正常1.png

pc端的font-size始终不正确

PCbug.png

找到源码

打开./node_modules/lib-flexible/flexible.js,找到如下片段源码:

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

修改源码

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

现在pc端应该是正常的

正常了.png

安装 px2rem-loader

npm install px2rem-loader --save-dev

配置 px2rem-loader

1.在build/utils.js中,找到exports.cssLoaders,作出如下修改:

  exports.cssLoaders = function (options) {
      
      options = options || {}
      
      const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
          remUint: 192
        }
      }
  
  ....

2.继续找到generateLoaders中的loaders配置,作出如下配置:

 // const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    const loaders = [cssLoader, px2remLoader]

运行项目 ... 新的bug来了 元素变得超级大

新的Bug.png

继续修改源码

目录:node_modules/px2rem/lib/px2rem.js

修改为

var defaultConfig = {
  baseDpr: 1,             // base device pixel ratio (default: 2)
  remUnit: 192,            // rem unit value (default: 75)
  remPrecision: 6,        // rem value precision (default: 6)
  forcePxComment: 'px',   // force px comment (default: `px`)
  keepComment: 'no'       // no transform value comment (default: `no`)
};

重启! 正常啦

正常啦.png

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们