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

效果

解决.gif

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

步骤1.png

结构目录以下javascript

image.png

reset.csscss

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.vuehtml

<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>

复制代码

如今拖动屏幕是没效果的 应该是这样vue

问题1.gif

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

npm install lib-flexible --save-dev
复制代码

引入 lib-flexible

main.js中引入lib-flexiblejava

import 'lib-flexible'
import '@/assets/css/reset.css' 
复制代码

接下来会看着这个问题node

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

手机端的font-size是正常的canvas

手机正常1.png

pc端的font-size始终不正确ruby

PCbug.png

找到源码markdown

打开./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

相关文章
相关标签/搜索