在日常的需求开发中，我们会遇到需要同时适配PC端与移动端的页面，今天我们来说两种适配的方式

1.使用@media媒体查询：

简单的举个栗子：

<div class="app"></div>

代码自提

@media only screen and (min-device-width : 768px) {
    .app {
        background-color: #000;
        height: 100px;
        width: 100px;
    }
}

@media only screen and (max-device-width : 768px) {
    .app {
        background-color: red;
        height: 100px;
        width: 100px;
    }
}

我们看下效果

pc

移动端

@media的方式使用起来比较简便，但是，当项目页面较为复杂时，可能会比较混乱，这时我们不如使用第二种方式，搭建两套页面。

2.使用router判断设备类型，从而跳转不同页面

当PC端与移动端的页面元素布局展示差异较大，切页面元素过于复杂时，我们可以搭建两套页面，通过配置路由来进行跳转。

举个栗子：

当我们有一个页面时

通过判断不同的设备类型来加载不同的路由模块