响应式布局之媒体查询 @media

Media Queries，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。

媒体查询有两种玩法，第一种，直接在link中判断设备的尺寸，然后引用不同的css文件

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 500px)">

意思是当屏幕的宽度大于等于500px的时候，应用styleA.css

 

screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型(自行度娘)

and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)

(min-width: 500px) 就是媒体特性(Media features) (自行度娘)

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 500px) and (max-width: 1000px)">

意思是当屏幕的宽度大于500小于1000时，应用styleB.css

 

第二种，直接写在<style>标签里

@media screen and (max-width:1000px) { /*当屏幕尺寸小于1000px时，应用下面的CSS样式*/
  .class {
    background: #ccc;
  }
}

要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。

 

bootstrap中的container类

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}