vue中rem简单配置
什么是rem?
rem是css3新增的一个相对长度单位
rem的值相当于根元素font-size值的倍数
1rem=根元素font-size
2rem=根元素font-size * 2
1. 在那设置font-size呢?
DOMContentLoaded事件动态设置根元素font-size,
html.style.fontSize = window.innerWidth / 10 + 'px
原理:选择屏幕尺寸的1/10作为默认值
,这样做有一个好处,随着屏幕的宽度变化,rem也会随之变化。
2. 实现
首先在App.vue中,将默认的#app样式去掉
export default { name: 'App' } document.addEventListener('DOMContentLoaded', {} => { // 获取根元素 const html = document.querySelector('html') // 通过document.querySelector找到根元素 // 将根元素font-size值设置为屏幕宽度的十分之一 html.style.fontSize = window.innerWidth / 10 + 'px` })
3. 出现问题
当屏幕宽度较大的时候,字号会非常大,所以我们要给根元素font-size设置个上限,比如我们定为50
App.vue修改export default { name: 'App' } document.addEventListener('DOMContentLoaded', {} => { // 获取根元素 const html = document.querySelector('html') // 通过document.querySelector找到根元素 // 将根元素font-size值设置为屏幕宽度的十分之一 let fontSize = window.innerWidth / 10 // 设置font-size上限 fontSize = fontSize > 50 ? 50 : fontSize // 判断当fontSize大于50的时候给个上限50,小于50的时候fontSize为自己本身 html.style.fontSize = fontSize + 'px` })
4. 引入reset.scss和global.scss
reset.scss的目的是为了消除不同浏览器默认样式的不一致性
global.scss规定了整个站点的公共样式、公共方法和公共参数等
实现px2rem方法,将px转换为rem
6. 实现
首先打开CSS Tools: Reset CSS站点
将Reset的样式进行拷贝
为了方便拷贝已复制过来了/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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; }
拷贝好之后在项目assets中新建一个styles文件夹并在文件夹中新建reset.scss文件,将以上代码粘贴进去
然后我们将根元素html和body的宽高以及默认字体进行设置(紧接之后)html,body{ width:100%; height:100%; font-family:'PIngFangSC-Light','PIngFang SC','STHeitiSC-Light','Helvetica-Light','Arial','sans-serif'; }
之后我们在styles文件夹中再创建一个global.scss文件
在global.scss中@import 'reset'// 引入reset.scss // 怎们计算呢?已知1rem = fontSize px,那么1px = (1 / fontSize)rem //定义一个默认的fontSize的值 $fontSize: 37.5; @function px2rem($px){ // 引入一个方法,传入px参数 @return($px / $fontSize) + rem; // 返回一个计算结果并拼接rem单位 } // 定义一个mixin(复用样式) @mixin center() { display: flex; justify-content: center; align-items:center; }
最后在main.js中引入
import '@/assets/style/global.scss'
6. 使用
比如,一个p标签的大小为20px
p{ font-size: px2rem(20); }