流体布局：
什么是流体布局？
流体是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载
移动端有两种设计方式：
全屏设计，在 PC 端和 PAD 平板也可以无缝浏览，但图片却会失真。
固屏设计、虽然会留有白边，但图片不会失真。
一般手机分辨率最小的不会小于 320。
采用固屏设计，几乎每一个body里面的父标签都必须加max-width: 6.4rem;
<meta>标签
一般会在head里面增加如下标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"> width=device-width//页面大小屏幕等宽
initial-scale=1.0//初始缩放比例，1.0 表示原始比例大小
user-scalable=no//用户是否可以缩放，这里 no 表示不可以。
导航栏
采用全屏100%，position: fixed; top: 0; z-index: 9999;文字不宜太多，容易溢出。
采用单位rem，相对大小
html{
font-size: 625%;
}在html {}的 CSS 中设置 62.5%相当于 10px，在 Chrome 浏览器却出现偏差。那么统一解 决的方法就是设置 625%，默认是 100px，这样达到全兼容。
布局忽略边框计算
div { box-sizing: border-box; }
页脚和内容之间插入一个div，清除浮动。
.clearfix:after{
content:'';
display:block;
clear:both;
visibility:hidden;
}
媒体查询
/*媒体查询，大于 480px 小于 640px*/
@media (min-width: 480px) and (max-width: 640px) {
#tour h2 { font-size: .26rem; }
#tour h3, #footer, #tour figure,
#tour .info { font-size: .16rem; }
}其它主要改成百分比形式就可以了。
文本溢出
多行文本溢出，显示省略号。
响应式布局：
什么是响应式布局？
就是一个网站能够兼容多个终端，通过检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式。
响应兼容式CSS 部分，基本是 PC 端移植，并改为流体百分比。
响应兼容式html部分，两个样式都写上，通过媒体查询，响应式隐藏即可。