码迷,mamicode.com
首页 > 其他好文 > 详细

媒体查询代码

时间:2018-10-11 01:40:33      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:dia   大屏   width   media   type   idt   样式   代码   sky   

一、直接写在媒体查询里

@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)">

媒体查询代码

标签:dia   大屏   width   media   type   idt   样式   代码   sky   

原文地址:https://www.cnblogs.com/hyx626/p/9769968.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!