vh 在不同浏览器表现不一致
--vh setProperty
css.ts
ts
import { onMounted } from "vue";
function setVh() {
let vh = window.innerHeight * 0.01;
console.log("vh px", vh);
document.documentElement.style.setProperty("--vh", `${vh}px`);
}
export function initVh() {
onMounted(() => {
setVh();
});
window.addEventListener("resize", () => {
setVh();
});
}
App.vue
ts
export default {
setup() {
initVh();
},
};
vh scss
scss
$vh1: var(--vh, 1vh);
@function sum($numbers...) {
$sum: 0px;
@each $number in $numbers {
$sum: $sum + $number;
}
@return $sum;
}
@function vh($num, $other...) {
@if length($other) > 0 {
@return calc(#{$vh1} * #{$num} + #{sum($other...)});
} @else {
@return calc(#{$vh1} * #{$num});
}
}
/*
100vh -> vh(100)
calc(100vh - 8px) -> vh(100,-8px)
calc(100vh + 6vw) -> vh(100,6vw)
Notice:
1. don't has diffrent unit at function vh's 2nd param $other. eg: vh(100, 2px, 6vw)
2. function vh's 2nd param shoud't have vh. eg: vh(100, 4vh)
*/