媒体查询代码

Posted 2021-01-11 hyx626

一、直接写在媒体查询里

@media 媒体类型and （媒体特性）{你的样式}

.d1{
    width:200px;
    height:600px;
    background:#000;
  }
  /*  超小屏幕 手机> */
  @media screen and (max-width:768px){
    .d1{
      background:skyblue;
    }
  }
  /*  小屏幕 平板 */
  @media screen and (min-width:768px) and (max-width:992px){
    .d1{
      background:#999;
    }
  }

  /*  中等屏幕 桌面显示器 */
  @media screen and (min-width:992px) and (max-width:1200px){
    .d1{
      background:blue;
    }

  }

  /*  大屏幕 大桌面显示器> */
  @media screen and (min-width:1200px){
    .d1{
      background:pink;
    }

}

二、链接css

<link rel="stylesheet" type="text/css"  href="styleA.css" media="screen(max-width:768px)">
<link rel="stylesheet" type="text/css"  href="styleB.css" media="screen(min-width:768px) and (max-width:992px)">
<link rel="stylesheet" type="text/css"  href="styleC.css" media="screen(max-width:992px) and (max-width:1200x)">
<link rel="stylesheet" type="text/css"  href="styleD.css" media="screen(min-width:1200)">