媒体查询代码

一、直接写在媒体查询里

@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" href="css/phoneStyle.css" media="screen and (max-width:768px)">
    <link rel="stylesheet" href="css/ipaStyle.css" media="screen and (min-width:768px) and (max-width:992px)">
    <link rel="stylesheet" href="css/smallPcStyle.css" media="screen and (min-width:992px) and (max-width:1200px)">
    <link rel="stylesheet" href="css/bigPcStyle.css" media="screen and (mim-width:1200px)">

转载于:https://www.cnblogs.com/hyx626/p/9769968.html