<template>
<div class="app">
<!-- 组件内容 -->
</div>
</template>
<script>
export default {
name: 'App',
mounted() {
// 判断屏幕尺寸
if (window.matchMedia('(min-width: 768px)').matches) {
// 导入桌面端样式
import('@/styles/style-desktop.css');
} else {
// 导入移动端样式
import('@/styles/style-mobile.css');
}
},
};
</script>
<style>
/* 其他样式 */
</style>
vue媒体查询导入不同的css文件
最新推荐文章于 2024-05-20 17:02:17 发布