1. 根据不同屏幕宽度赋予不同样式
// 根据不同屏幕宽度赋予不同样式 <div :class="[state.clientWidth < 600 ? 'self-adaption' : '', 'tab-control']"></div> const state = reactive({ clientWidth: 0, // 屏幕可视宽度 }); // 窗口大小改变时(适配移动端) const onLayoutResize = () => { state.clientWidth = document.body.clientWidth; }; // 页面加载前 onBeforeMount(() => { onLayoutResize(); window.addEventListener('resize', onLayoutResize); }); // 页面卸载时 onUnmounted(() => { window.removeEventListener('resize', onLayoutResize); }); onMounted(() => { }); |
2. 响应式布局
Element Plus - The world's most popular Vue 3 UI framework
// 参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xs、sm、md、lg 和 xl <el-row :gutter="50"> <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="患者编号" prop="patient_id"> <el-input v-model="state.ruleForm.patient_id" disabled placeholder="" clearable></el-input> </el-form-item> </el-col> <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="患者姓名" prop="patient_name"> <el-input v-model="state.ruleForm.patient_name" placeholder="请输入" maxlength="15" clearable></el-input> </el-form-item> </el-col> </el-row> |
3. 媒体查询
CSS媒体查询_媒体查询1366_前端小芬芬的博客-CSDN博客
部分屏幕样式存在问题,直接做媒体查询适配
4. 判断手机和PC 写不同样式
<div v-if="!state.isMobile"> 样式A </div> <div v-else> 样式B </div> // 定义变量内容 const state = reactive({ isMobile: /Mobile/i.test(navigator.userAgent) }); |