我现在有一份vue代码,是pc端的,现在需要添加页面给移动端使用,怎么做到移动端新的页面自适应,对老的代码PC端无影响

可以考虑使用响应式设计的方式来实现移动端新页面的自适应，同时不影响PC端的原有页面。具体实现步骤如下：

1. 在原有的 PC 端代码中，使用 CSS 媒体查询来针对不同的屏幕大小设置样式。例如，在大屏幕下，可以设置宽度为 1200px；在中等屏幕下，可以设置宽度为 992px；在小屏幕下，可以设置宽度为 768px。

2. 新增移动端页面时，使用类似于以下的代码来实现响应式布局：

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">
      <!-- 在这里编写移动端页面的内容 -->
    </div>
  </div>
</div>

这段代码将使用 Bootstrap grid system 来将页面分割为不同的列和行。其中，`col-sm-6` 表示在小屏幕下每行显示 2 列，`col-md-4` 表示在中等屏幕下每行显示 3 列，`col-lg-3` 表示在大屏幕下每行显示 4 列。通过这种方式，在不同的屏幕大小下，页面将自动适应布局。

3. 为了确保新的移动端页面不会影响原有的 PC 端页面，可以根据需要在移动端页面中添加以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

这段代码将设置 viewport 的宽度为设备的宽度，并将初始缩放比例设置为 1。这样可以确保在移动端上，页面将自动缩放到适合设备宽度的大小，而不会影响原有的 PC 端页面。

通过以上步骤，可以实现移动端新页面的自适应，同时不影响原有的 PC 端页面。