vite+vue3的H5项目自适应屏幕适配完美实践

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { setupStore } from './store'
import { setupRouter } from './router'
import './styles/index.css'
 
// 自适应屏幕
import { clientWidth, clientHeight } from './utils/responsive'
 
const app = createApp(App)
 
// 设置状态管理
setupStore(app)
 
// 设置路由
setupRouter(app)
 
// 设置viewport
const setViewport = () => {
  const { remDesign, rem2px } = clientWidth()
  const scale = remDesign / rem2px
  const content = `width=device-width,initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`
  document.querySelector('meta[name="viewport"]').setAttribute('content', content)
}
 
// 监听窗口大小变化
window.addEventListener('resize', setViewport)
 
// 初始化viewport
setViewport()
 
app.mount('#app')

这段代码示例展示了如何在Vite+Vue 3项目中设置viewport以实现移动端的屏幕自适应。首先，导入了必要的工具函数和配置，然后在创建Vue应用后设置了状态管理、路由和viewport。最后，监听窗口大小变化并在变化时更新viewport设置。这样做可以确保在屏幕大小发生变化时，页面的布局和样式仍然能够正确适配。