viewport配置
- viewport用来设置用户在手机上的可视区域
- vue脚手架默认设置了
- width=device-width ： 指定viewport宽度为设备宽度
- initial-scale=1.0 ： 指定默认缩放比例为1:1
- 这样的设置会有问题就是屏幕的缩放比例没有固定，操作容易误触导致屏幕放大或缩小
- 我们增加三个配置项：通过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配置
- rem是css3新增的一个相对长度单位
- rem的值相当于根元素font-size值的倍数
1rem = 根元素font-size
2rem = 根元素font-size * 2 - DOM加载完毕也就是DOMContentLoaded事件动态设置根元素font-size
html.style.fontSize = window.innerWidth / 10 + 'px'
这样做的好处：随着屏幕宽度的变化，rem对应的值也会动态变化 - 在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;
}
