美文网首页
[PuffBook项目总结]配置之viewport,rem,re

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

作者: Yixi_Li | 来源:发表于2019-04-19 01:25 被阅读0次

viewport配置

  1. viewport用来设置用户在手机上的可视区域
  2. vue脚手架默认设置了
  • width=device-width : 指定viewport宽度为设备宽度
  • initial-scale=1.0 : 指定默认缩放比例为1:1
  1. 这样的设置会有问题就是屏幕的缩放比例没有固定,操作容易误触导致屏幕放大或缩小
  2. 我们增加三个配置项:通过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;
}

相关文章

网友评论

      本文标题:[PuffBook项目总结]配置之viewport,rem,re

      本文链接:https://www.haomeiwen.com/subject/crkfgqtx.html