rem配置

vue中rem简单配置


什么是rem?

rem是css3新增的一个相对长度单位
rem的值相当于根元素font-size值的倍数

  1. 1rem=根元素font-size
  2. 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`
  })

发现超过50的时候最大上限就为50,改变浏览器大小会发现当小于50时则是它本身

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'

刷新后,发现生效所有的css样式已经重置了

目前关于基础配置已经完成

6. 使用

比如,一个p标签的大小为20px

 p{
    font-size: px2rem(20);
 }

  目录