结构目录以下javascript
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
npm install lib-flexible --save-dev
复制代码
在main.js
中引入lib-flexiblejava
import 'lib-flexible'
import '@/assets/css/reset.css'
复制代码
接下来会看着这个问题node
注:html的font-size为 宽度/10 即正常npm
手机端的font-size是正常的canvas
pc端的font-size始终不正确ruby
找到源码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端应该是正常的
npm install px2rem-loader --save-dev
复制代码
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`)
};
复制代码
重启! 正常啦