[分享]css区分移动端和电脑

CSS是前端开发中非常重要的技术，其中一个常见的应用就是在不同设备上调整页面的样式。下面将介绍如何通过CSS区分移动端和电脑。media screen and (maxwidth: 768px) { ...

CSS是前端开发中非常重要的技术，其中一个常见的应用就是在不同设备上调整页面的样式。下面将介绍如何通过CSS区分移动端和电脑。

@media screen and (max-width: 768px) {
  /*移动端样式*/
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 769px) {
  /*电脑端样式*/
  body {
    font-size: 16px;
  }
} 

在上面的代码中，使用了CSS中的@media媒体查询。通过设置最大或最小宽度来确定是移动端还是电脑端。当屏幕宽度小于等于768px时，应用的是移动端样式；当屏幕宽度大于等于769px时，应用的是电脑端样式。

这样的区分使得在不同设备上显示的页面看起来更加合适，提高了用户体验。