多端兼容常用适配方式

前端小芬芬

已于 2023-05-10 19:31:22 修改

阅读量1.2k

点赞数

分类专栏： css js element-ui 文章标签： vue.js 前端 css

于 2023-05-10 19:28:38 首次发布

本文链接：https://blog.csdn.net/yf18040578780/article/details/130608095

版权

js 同时被 3 个专栏收录

37 篇文章 0 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

element-ui

18 篇文章 0 订阅

订阅专栏

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)
});