第3章 拥抱流式布局

一、固定布局经不起来考验
1.布局的流行趋势：流式布局→固定像素布局→流式布局
原因：移动端的流行，设备尺寸变化快，pc上网站的流量变少

二、响应式设计需要百分比布局（流式布局）响应式设计：媒体查询（媒体不同，CSS不同）
百分比布局：创建一个弹性界面
两全其美：使用百分比布局创建流动的弹性界面，同时使用媒体查询来限制元素的变动范围

三、将网页布局改成百分比布局
1.如何改？
百分比的宽度-目标元素的宽度/上下文元素的宽度
width:margin-left/margin-right;padding-left/padding-right

2.改变heade,Content,navigation等的百分比;

3.改变Content里面的Silderdon,content;

4.改变导航的margin-right

① inline:行内内联元素
例：<a><span>
**特点：**元素都在一行
设置height,margin-top,margin-bottom,padding-top等无效；
设置width和margin,padding宽度相关值有效

② block:块级元素
例：<div> <h1> <ul> <li>
块级元素单独占一行，所有的width,height,padding,margin都可以手动设置

③inline-block:行内块、块元素
**设置：**和block一置，但都处在一行内。

5.字体大小用em代替px
em相对当前原有的字体大小的相对倍数

body{font-size(60/65)em}

px相对当前屏幕的分辨率显示字体大小

四、弹性图片
max-width:最大宽度和max-height
100%：图片最大宽度是本身宽度的100%
限制网页的无线变大：在最外层的div上设置max-width

五、为不同屏幕尺寸提供不同的图片
涉及到后台（服务端脚本）技术
http://adaptive.image.com

六、CSS网络技术→模块（CSS量很小）
Semantic (http://semantic.gs)
Skelton (http:/getskeleton/.com)
Columnal (http://www.columna.com)

七、CSS框架（包含网络系统）
↙
bootstrap custon自定义

12列→class("col-12"→12列)