CSS || @media媒体查询

media实现响应式网页

响应式网页设计Responsive Web Design指可以自动识别屏幕宽度，对并对样式做出相应调整

通过媒体查询实现在不同屏幕宽度下加载不同的CSS样式

1 移动端允许网页自动调整

    <meta name="viewport" content="width=device-width, initial-scale=1">

• viewport表示视口：浏览器可视区域宽度和高度

• width=device-width：默认网页宽度等于屏幕宽度

• initial-scale=1：原始缩放比例为1，即网页占屏幕面积的100%

对于IE6、7、8需要使用Polyfill库：css3mediaqueries.js

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

---

2 不使用绝对宽度

网页会根据屏幕宽度调整布局，所以不能使用绝对宽度进行布局。并且不能使用绝对单位的其他元素。

宽度只能使用相对单位百分数100%、vw和vh视口宽度和视口高度

---

3 相对大小字体

不能使用绝对单位的元素：字体使用em、rem等相对单位进行设置

---

4 响应式图片

• 自适应网页需要图片实现自动缩放：只需要将设置max-width: 100%即可

---

5 流动布局fluid-grid

在布局系统中，各个栅格的位置都是浮动的，并不固定。主要利用float实现栅格系统

float的元素不会在水平方向溢出overflow，出现水平滚动条；而是直接滚动到前面元素的下方。注意绝对定位的使用，小心

---

6 media引入不同CSS样式

响应式设计的核心是CSS3引入的Media Query模块。自动探测屏幕类型及宽度，符合条件时加载CSS样式

Media Query模块有三种引入方式：

6.1 使用link标签

<!-- 在屏幕宽度小于400px时，才引用tinyScreen.css样式表 -->
<link rel="stylesheet" href="tinyScreen.css" type="text/css" media="screen and (max-width: 400px)">

<!-- 在屏幕宽度大于400px并且小于600px时，才引用mediumScreen.css样式表 -->
<link rel="stylesheet" href="mediumScreen.css" type="text/css" media="screen and (min-width: 400px) and (max-width: 600px;)">

6.2 使用@import

利用@import url("tinyScreen") screen and (max-width: 400px);满足条件时，可以在现有CSS文件中加载其他的CSS文件

注：@import与link标签的区别：

1. link属于HTML标签，除引入CSS样式表还有其他作用；@import是CSS提供的一种加载CSS文件的方式

2. link标签可以定义RSS、定义rel连接属性；@import只能加载CSS文件

3. HTML页面被下载并且增量解析，link标签被增量解析到便开始加载；@import需要等到HTML页面下载完毕才开始加载

4. JavaScript的DOM接口不能操作@import

5. @import可以在现有CSS文件中引入

6.3 使用@media

在CSS文件中，使用@media引入一段查询的样式

@media all and (max-width: 768px) {
    /* 满足查询条件后应用的规则 */
}

---

7 12列栅格布局系统

主要步骤：

1. 定义容器宽度：100%，必要时可以设置最大宽度max-width。将容器设置为border-box便于设置固定宽度的padding

2. 保证行元素不会溢出到其他行：通过前后添加伪元素，清除浮动

3. 设置列宽：根据100% / 列数，同时设置padding值，用作网格的间距；

4. 设置不同列数组合section的宽度：col-n = col- * n

5. 设置响应式网格：根据媒体查询，设置不同的列宽即可，或者应用不同的列宽

• 实现12列栅格系统

  /* 使用border-box，便于在百分比宽度容器中设置固定宽度的padding */
  * {box-sizing: inherit;}
  html {box-sizing: border-box;}
  p{margin: 0;}
  
  /* 定义容器宽度 */
  .grid_container {
      width: 100%;
      max-width: 1200px;
  }
  
  /* 定义row：行内的元素不会溢出到其他行。利用清除浮动的方式实现 */
  .row::before,
  .row::after {
      content: "";
      display: block;
      clear: both;
      height: 0;
      overflow: hidden;
  }
  
  /* 设置列宽：容器宽 / 列数；这里定义12列 */
  /* 使用浮动进行定位，避免容器内没有内容，为容器设置一个最小高度1px */
  /* 设置列间距：使用padding。容器使用的是border-box，所以网格水平间距是水平的padding-left与padding-right之和 */
  /* 垂直间距是padding-top与padding-bottom */
  [class*='col-'] {
      float: left;
      width: 8.33%;
      min-width: 1px;
  
      padding: 10px;    
  }
  
  /* 多个网格宽度的组合section */
  
  @media screen and (min-width: 769px) {
      .col-md-1 {width: 8.33%;}
      .col-md-2 {width: 16.66%;}
      .col-md-3 {width: 25%;}
      .col-md-4 {width: 33.33%;}
      .col-md-5 {width: 41.66%;}
      .col-md-6 {width: 50%;}
      .col-md-7 {width: 58.33%;}
      .col-md-8 {width: 66.66%;}
      .col-md-9 {width: 75%;}
      .col-md-10 {width: 83.33%;}
      .col-md-11 {width: 91.66%;}
      .col-md-12 {width: 100%;}
  }
  
  
  /* 都不设置样式的具体高度，根据内容撑开 */
  
  /* 响应式，以768px为分界点 */
  @media screen and (max-width: 768px) {
      .col-sm-1 {width: 8.33%;}
      .col-sm-2 {width: 16.66%;}
      .col-sm-3 {width: 25%;}
      .col-sm-4 {width: 33.33%;}
      .col-sm-5 {width: 41.66%;}
      .col-sm-6 {width: 50%;}
      .col-sm-7 {width: 58.33%;}
      .col-sm-8 {width: 66.66%;}
      .col-sm-9 {width: 75%;}
      .col-sm-10 {width: 83.33%;}
      .col-sm-11 {width: 91.66%;}
      .col-sm-12 {width: 100%;}
  }
  
  /* ------------------------------------------------------------ */
  /* 内容的样式 */
  [class*='col-'] > p {
      height: 50px;
      line-height: 50px;
      background: #eee;
      color: red;
      border: 1px solid #999;
  }

• 使用：在屏幕小于768px时，应用col-sm-类的样式。

  <div class="grid-container ">
      <div class="row">
          <div class="col-md-4 col-sm-6"><p>col-4</p></div>
          <div class="col-md-4 col-sm-6"><p>col-4</p></div>
          <div class="col-md-4 col-sm-12"><p>col-4</p></div>
      </div>
      <div class="row">
          <div class="col-md-3 col-sm-3"><p>col-3</p></div> 
          <div class="col-md-6 col-sm-6"><p>col-6</p></div> 
          <div class="col-md-3 col-sm-3"><p>col-3</p></div> 
      </div> 
      <div class="row">
          <div class="col-md-1 col-sm-2"><p>col-1</p></div> 
          <div class="col-md-1 col-sm-2"><p>col-1</p></div> 
          <div class="col-md-2 col-sm-8"><p>col-2</p></div> 
          <div class="col-md-2 col-sm-3"><p>col-2</p></div> 
          <div class="col-md-6 col-sm-3"><p>col-6</p></div> 
      </div> 
  </div>

添加偏移offset功能

offset的实现思路是利用margin-left实现偏移，距离与列宽相同。只需添加响应式规则中即可

@media screen and (min-width: 769px) {
    .col-md-1 {width: 8.33%;}
    .col-md-2 {width: 16.66%;}
    .col-md-3 {width: 25%;}
    .col-md-4 {width: 33.33%;}
    .col-md-5 {width: 41.66%;}
    .col-md-6 {width: 50%;}
    .col-md-7 {width: 58.33%;}
    .col-md-8 {width: 66.66%;}
    .col-md-9 {width: 75%;}
    .col-md-10 {width: 83.33%;}
    .col-md-11 {width: 91.66%;}
    .col-md-12 {width: 100%;}
    /* 偏移offset */
    .col-md-offset-1 {margin-left: 8.33%;}
    .col-md-offset-2 {margin-left: 16.66%;}
    .col-md-offset-3 {margin-left: 25%;}
    .col-md-offset-4 {margin-left: 33.33%;}
    .col-md-offset-5 {margin-left: 41.66%;}
    .col-md-offset-6 {margin-left: 50%;}
    .col-md-offset-7 {margin-left: 58.33%;}
    .col-md-offset-8 {margin-left: 66.66%;}
    .col-md-offset-9 {margin-left: 75%;}
    .col-md-offset-10 {margin-left: 83.33%;}
    .col-md-offset-11 {margin-left: 91.66%;}
    .col-md-offset-12 {margin-left: 100%;}
}

8 响应式的实现思路

1. 多写class，在不同条件应用不同的网格；上面例子就是使用这种

2. 利用相同的网格，改变网格的宽度；