响应式布局

响应式布局的优缺点

优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

什么是Viewport

viewport是用户网页的可视区域。
viewport翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"
窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破
坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的
不同部分。

width：控制viewport的大小，可以指定的一个值，如600，或者特殊的值，如device-width为设备的宽度（单位为缩放为100%时的CSS的像素）。
height：和width相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

网格视图

响应式网格视图通常是12列，宽度为100%，在浏览器窗口大小调整时会自
动伸缩。

12列的网格系统可以更好的控制响应式网页。
首先我们可以计算每列的百分比:100%/12列=8.33%。
在每列中指定class，class="col-"用于定义每列有几个跨度：

.col-1{width:8.33%;}
.col-2{width:16.66%;}
.col-3{width:25%;}
.col-4{width:33.33%;}
.col-5{width:41.66%;}
.col-6{width:50%;}
.col-7{width:58.33%;}
.col-8{width:66.66%;}
.col-9{width:75%;}
.col-10{width:83.33%;}
.col-11{width:91.66%;}
.col-12{width:100%;}

媒体查询

使用@media查询，你可以针对不同的媒体类型定义不同的样式。

动画是使元素从一种样式逐渐变化为另一种样式的效果。

@media only mediatype and|not ( media feature){
   CSS-Code;
}

使用@media查询来制作响应式设计
如果窗口小于500px,背景将变为浅蓝色：

@media only screen and ( max-width : 500px ) {
  body{
    background-color : lightblue ;
  }
}

图片

width属性：图片宽度百分之百

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

max-width属性：图片最大宽度百分之百

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

背景图片

1.如果background-size属性设置为"contain",背景图片将按比例自适应内容
区域。图片保持其比例不变

2.如果background-size属性设置为"100%100%"，背景图片将延展覆盖整个
区域

3.如果background-size属性设置为"cover"，则会把背景图像扩展至足够大，
以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此背景图像的
某些部分无法显示在背景定位区域中。