VUE2.X 使用lib-flexible px2rem-loader 實現1920*1080下的等比縮小

效果

先用腳手架安裝基礎框架 並實現一個水平居中的效果 以下圖所示

結構目錄以下

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>

複製代碼

如今拖動屏幕是沒效果的 應該是這樣

安裝 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是正常的

pc端的font-size始終不正確

找到源碼

打開./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端應該是正常的

安裝 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來了 元素變得超級大

繼續修改源碼

目錄: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`)
};
複製代碼

重啓！ 正常啦