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

最新推荐文章于 2024-07-18 11:16:25 发布

xinxinTHX

最新推荐文章于 2024-07-18 11:16:25 发布

阅读量993

点赞数

文章标签：前端 vue

本文链接：https://blog.csdn.net/xinxinTHX/article/details/112686164

版权

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

摘要由CSDN通过智能技术生成

在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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xinxinTHX

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue + element 通过使用2套CSS支持PC端和移动端

在App.vue中修改实现使用2套csscreated(){ if(document.documentElement.clientwidth > 640){ require('./style/pc.css'); this.media= 'pc'; }else{ require('./style/mobile.css'); this.media= 'mobile'; }}其中pc端的css为pc.css，
复制链接

扫一扫