PC、移动端适配 - Vue、H Jquery

在Vue、H5和Jquery中实现PC和移动端适配，通常需要关注以下几个方面：

1. 响应式布局：使用CSS的媒体查询来定义不同屏幕尺寸下的布局和样式。

/* 针对移动端的样式 */
@media (max-width: 768px) {
  .container {
    /* 移动端的容器样式 */
  }
}

2. Jquery适配：使用Jquery监听窗口大小变化，并相应调整布局。

$(window).resize(function() {
  if ($(window).width() < 768) {
    // 移动端适配代码
  } else {
    // PC端适配代码
  }
});

3. Vue组件适配：在Vue组件中监听窗口大小变化，并通过计算属性或者方法来改变组件的行为。

export default {
  data() {
    return {
      isMobile: false
    };
  },
  created() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.isMobile = window.innerWidth < 768;
    }
  }
};

在Vue中，可以使用v-if或v-show来根据设备类型显示或隐藏不同的内容。

<template>
  <div>
    <div v-if="isMobile">移动端内容</div>
    <div v-else>PC端内容</div>
  </div>
</template>

综上所述，要实现PC和移动端的适配，关键是通过媒体查询、Jquery的事件监听和Vue的响应式布局来根据不同设备的屏幕尺寸来调整页面的显示。