// 动态设置 viewport 缩放比
(function (designWidth) {
const dEl = document.documentElement
let meta = document.querySelector('meta[name=viewport]')
if (!meta) {
meta = document.createElement('meta')
meta.setAttribute('name', 'viewport')
document.head.appendChild(meta)
}
function setMetaContent() {
const deviceWidth = dEl.clientWidth
const scale = deviceWidth / designWidth
const content = `width=${deviceWidth}, initial-scale=${scale}`
meta.setAttribute('content', content)
}
setMetaContent()
window.addEventListener('resize', setMetaContent)
})(750)
lib-flexible 动态设置根字体postcss-pxtorem px转rem
pnpm add amfe-flexible
pnpm add -D postcss postcss-pxtorem
postcss-px-to-viewport px转vwvw 兼容方案
<script>
const dpr = devicePixelRatio >= 3 ? 3 : devicePixelRatio >= 2 ? 2: 1;
document.documentElement.setAttribute('data-dpr', dpr);
</script>
<!-- size 浏览器视口为 320px 时图片宽度为 320px,其他情况为 640px -->
<!-- srcset DPR为1 2 3时对应取不同图片 -->
<img src="logo1x.png"
size="(max-width: 320px) 320w, 640w"
srcset="logo2x.png 2x, logo3x.png 3x">
<!-- 页面内容完全覆盖整个窗口 -->
<meta name="viewport" content="width=device-width, viewport-fit=cover">
// 更改根目录类名
function changeTheme(theme) {
document.body.className = theme
}
<script setup>
const theme = {
color: '#eee',
}
</script>
<template>
<p />
</template>
<style scoped>
p {
color: v-bind('theme.color');
}
</style>
[data-theme=default] {
--color-primary: #516BD9;
}
/* 全局中设置好预设的全局CSS变量样式 */
:root {
--theme-color: #333;
--theme-background: #eee;
}
body {
/* 改变整体色调 */
filter: hue-rotate(45deg);
/* 悼念色 */
/* filter: grayscale(1); */
}
UnoCSS Iconsall available icons