vue网页 PC端和移动端兼容方案

最新推荐文章于 2025-06-17 15:21:10 发布

东方文艺复兴

最新推荐文章于 2025-06-17 15:21:10 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/liangtao999/p/12047734.html

大前端同时被 2 个专栏收录

95 篇文章

订阅专栏

Vue

87 篇文章

订阅专栏

本文介绍了两种实现响应式设计的方法：一是使用媒体查询(@media)，适用于小型网页项目；二是通过判断用户设备类型来调整界面布局，更适用于复杂应用。文章包含具体代码示例。

一，通过媒体查询实现响应式（@media）
优点：适用于小型网页，用户交互较少的项目，代码用量较少；
缺点：在页面内容过多，用户交互过多的时候，如果通过 @media 来一个个改的话，那代码量可就很多了，而且也不方便维护。因此需要另一种方式来解决这个问题。

二，通过判断打开设备的类型，区分需要显示的方式和界面

//App.vue
  mounted() {
      if (this._isMobile()) {
        alert("手机端");
        // this.$router.replace('/m_index');
      } else {
        alert("pc端");
        // this.$router.replace('/pc_index');
      }
    },
    methods: {
      //App.vue
      _isMobile() {
        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
        return flag;
      }
  }