[PuffBook项目总结]配置之viewport,rem,re

viewport配置

1. viewport用来设置用户在手机上的可视区域
2. vue脚手架默认设置了

• width=device-width ： 指定viewport宽度为设备宽度
• initial-scale=1.0 ： 指定默认缩放比例为1:1

3. 这样的设置会有问题就是屏幕的缩放比例没有固定，操作容易误触导致屏幕放大或缩小
4. 我们增加三个配置项：通过maximum-scale和minimum-scale限定屏幕缩放比例为1:1，通过user-scalable限制用户对屏幕进行缩放

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

rem配置

1. rem是css3新增的一个相对长度单位
2. rem的值相当于根元素font-size值的倍数
   1rem = 根元素font-size
   2rem = 根元素font-size * 2
3. DOM加载完毕也就是DOMContentLoaded事件动态设置根元素font-size
   html.style.fontSize = window.innerWidth / 10 + 'px'
   这样做的好处：随着屏幕宽度的变化，rem对应的值也会动态变化
4. 在APP.vue中

<script>
  export default {}
  document.addEventListener('DOMContentLoaded', () => {
    const html = document.querySelector('html')
    let fontSize = window.innerWidth / 10
    fontSize = fontSize > 50 ? 50 : fontSize
    html.style.fontSize = fontSize + 'px'
  })
</script>

reset.scss和global.scss

reset.scss的目的是为了消除不同浏览器默认样式的不一致性
global.scss规定了整个站点的公共样式、公共方法和公共参数等
实现px2rem方法，将px转化为rem

$ratio: 37.5; //即font-Size默认为37.5

// 1rem = fontSize px
// 1px = (1/fontSize)rem
@function px2rem($px) {
  @return ($px / $ratio) + rem;
}