css媒体查询跳转页面

CSS媒体查询是一种用于响应式网页设计的技术，可以根据设备的屏幕大小或其他特征，改变页面的样式和布局。其中一个常见应用是在不同设备上跳转不同的页面。

@media screen and (max-width: 768px) {
   /* 以下为跳转手机页面的样式 */
   body {
      background-color: lightblue;
   }
   /* 跳转链接 */
   a {
      display: block;
      width: 80%;
      margin: 0 auto;
      font-size: 24px;
      text-align: center;
      color: white;
      text-decoration: none;
      border-radius: 10px;
      background-color: #0066cc;
      padding: 10px;
   }
}

@media screen and (min-width: 769px) {
   /* 以下为跳转电脑页面的样式 */
   body {
      background-color: lightgreen;
   }
   /* 跳转链接 */
   a {
      display: block;
      width: 50%;
      margin: 0 auto;
      font-size: 36px;
      text-align: center;
      color: white;
      text-decoration: none;
      border-radius: 20px;
      background-color: #33cc33;
      padding: 20px;
   }
}

可以看到，在上面的代码中，我们使用了两个媒体查询来分别适应手机和电脑的设备，当屏幕的宽度小于等于768px时，将应用手机页面的样式，而当屏幕的宽度大于等于769px时，则将应用电脑页面的样式。在样式中，我们定义了一个跳转链接，当用户点击该链接时，即可跳转到对应的页面。