完美适配PC端（媒体查询）

小P孩zzh

已于 2023-12-26 10:57:53 修改

阅读量724

点赞数 16

文章标签： css css3

于 2023-12-26 10:49:50 首次发布

本文链接：https://blog.csdn.net/weixin_43732777/article/details/135216336

版权

  /*>=0,<960的设备屏幕*/
  @media screen and (min-width: 0px) and (max-width: 959px){
    body {
      font-size: 12px;
      background-color: aquamarine;
    }
  }

  /*>=960,<1024的设备屏幕*/
  @media screen and (min-width: 960px) and (max-width: 1023px) {
    body {
      font-size: 12px;
      background-color: red;
    }
  }

  /*>=1024,<1280的设备屏幕*/
  @media screen and (min-width: 1024px) and (max-width: 1279px){
    body {
      font-size: 14px;
      background-color: yellow;
    }
  }

  /*>=1280,<1440的设备屏幕*/
  @media screen and (min-width: 1280px) and (max-width: 1439px) {
    body {
      font-size: 18px;
      background-color: green;
    }
  }

  /*>=1440,<1680的设备屏幕*/
  @media screen and (min-width: 1440px) and (max-width: 1679px){
    body {
      font-size: 20px;
      background-color: cyan;
    }
  }

  /*>=1680,<1920px的设备屏幕*/
  @media screen and (min-width: 1680px) and (max-width: 1919px) {
    body {
      font-size: 24px;
      background-color: yellowgreen;
    }
  }

  /*>=1920的设备屏幕*/
  @media (min-width: 1920px) {
    body {
      font-size: 30px;
      background-color: hotpink;
    }
  }