响应式布局

概念

---

步骤

1. 设置 Meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

---

2.通过媒体查询来设置样式Media Queries

// 这里面的样式会覆盖掉之前所定义的样式
@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

---

3.设置多种视图宽度

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
@media only screen and (width:320px)and (width:768px){}

---

4.字体设置

• css3引入了新的单位叫做rem,和em类似但对于Html元素，rem更方便使用。
• rem是相对于根元素的，不要忘记重置根元素字体大小：

html{font-size:100%;}
完成后，你可以定义响应式字体：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}

---

5.注意事项

宽度需要使用百分比

#head { width: 100% }
#content { width: 50%; }

处理图片缩放的方法

• 给图片指定的最大宽度为百分比。假如图片超过了，就缩小；假如图片小了，就原尺寸输出:

  img { width: auto; max-width: 100%; }

• 用::before和::after伪元素 +content 属性来动态显示一些内容。在 css3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能。

  // HTML 结构
  <img src="image.jpg"
       data-src-600px="image-600px.jpg"
       data-src-800px="image-800px.jpg"
       alt="">
  
  // CSS 控制：
  @media (min-device-width:600px) {
      img[data-src-600px] {
          content: attr(data-src-600px, url);
      }
  }
  @media (min-device-width:800px) {
      img[data-src-800px] {
          content: attr(data-src-800px, url);
      }
  }     

• 除了img标签的图片外我们经常会遇到背景图片，比如logo为背景图片：

  #log a{
      display:block;
      width:100%;
      height:40px;
      text-indent:55rem;
      background-img:url(logo.png);
      background-repeat:no-repeat;
      background-size:100% 100%;
  }
      // background-size是css3的新属性，用于设置背景图片的大小，有两个可选值，第一个值用于指定背景图的width，第2个值用于指定背景图的height，如果只指定一个值，那么另一个值默认为auto。
      // background-size:cover; 等比扩展图片来填满元素
      // background-size:contain; 等比缩小图片来适应元素的尺寸

其他属性

table th, table td { padding: 0 0; text-align: center; }