CSS响应式布局

响应式网页仅使用HTML+CSS进行设计，其内容会随着设备尺寸自动的resize以适应设备显示能力。通常它能够在各种类型的媒介上均呈现出很好的布局效果，可以为绝大多数或所有的用户带来最好的用户体验。

• viewport是指用户对网页的可视区域。HTML5引入的新方法控制viewport。即在head中引入以下标签：

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

  此处使用width=device-width将页面宽度与设备宽度相关联，initial-scale定义了页面初始尺寸。

  关于viewport需要注意以下几点：

  • 不要使用大的固定宽度的元素；
  • 不要使内容依赖于一个特定视图宽度进行渲染；
  • 使用@media属性适应不同屏幕尺寸的样式；

---

• 栅格化的试图
  栅格化的视图中，网页被分为等宽的12列，总宽度为100%,平均列宽为8.33%。内容根据栅格进行布局，采用平均列宽的倍数，resize时栅格相应变化也会被resize。

---

• Media Query
  Media Query是CSS3引入的新技术，相应的元素为@media。其使用方法如下：

  @media mediaType and|not|only (media feature) {
  //CSS样式;
  }
  

  其中可用的mediaType有all/ print/ screen/ speech;逻辑判断关键字and/ not/ only；媒体特征定义输出设备的一些特征：如max-width/ min-width/ width/ height/ max-resolution等等。
  该表达式表明当满足圆括号内指定的媒体特征时，执行花括号内的CSS代码；利用该特性可以方便的进行内容的响应式布局。

---

• 响应式的图片
  设置如下可以使图片随着viewport的大小resize，并且可以超过图片本身的尺寸大小；

  img {
  width: 100%;
  height: auto;
  }

  如果让图片响应的同时不超过原大小，使用max-width

  img {
  width: 100%;
  height: auto;
  }

  当背景为图片并且background-size设定不同的属性值时，其响应方式有区别：

  • background-size = contain时，图片可以进行缩放，不能进行拉伸，并且缩放时保持宽高比；
  • background-size = 100% 100%时，此时可以缩放或者拉伸，但是图片高度不变；
  • background-size = cover时，可以缩放或者拉伸，但是保持aspect-ratio，因此会发生图片clip；

  当然还可以使用HTML5新增的为尺寸的设备定义不同的背景图片。当设备页面宽度小于400时采用smallflower作为背景图片。

  <picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
  </picture>

---

• 响应式视频
  与图片类似，设置如下：

  video {
  width: 100%;
  height: auto;
  }

  video {
  max-width: 100%;
  height: auto;
  }

---

当然，也可以使用Bootstrap等框架进行响应式布局，更多模板和练习可以点击此处