解決大屏自適應
創建scss函數
1920爲設計稿寬度
//func.scss
@function r($px) {
@if $px==0 {
@return 0;
}
@return $px / 1920 * 100vw;
}
然後在vue.config.js中插入如下,使這個函數能夠全局使用
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
@import "@/styles/func.scss";
`
}
}
},
}
具體使用方式
<style lang="scss">
html {
height: 100%;
box-sizing: border-box;
font-size: (1920 / 192) * 100vw;
@media screen and (max-width: 1200px) {
font-size: 120px;
}
}
body{
font-size: r(16);
}
</style>