vue + element 通过使用2套CSS支持PC端和移动端

最新推荐文章于 2025-09-25 01:15:11 发布

原创最新推荐文章于 2025-09-25 01:15:11 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

这篇博客介绍了如何在Vue应用的App.vue组件中根据设备屏幕宽度动态加载不同的CSS样式文件，实现了针对PC和移动端的适配。通过在created钩子中判断document.documentElement.clientWidth，分别加载pc.css和mobile.css，确保了不同设备的用户体验。

在App.vue中修改实现使用2套css

created(){
    if(document.documentElement.clientwidth > 640){
        require('./style/pc.css');
        this.media= 'pc';
    }else{
        require('./style/mobile.css');
        this.media= 'mobile';
    }
}

其中pc端的css为pc.css，移动端的css为mobile.css