静态、自适应、流式、响应式布局

静态布局：不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；

自适应布局：页面里面元素的位置会变化而大小不会变化；

流式布局：页面中元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

响应式布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

响应式布局：判断分辨率大小，赋予不同的样式

@media screen and (max-width : 320px){
body{...}
}
@media screen and (min-width: 800px) and (max-width: 1024px){
body{...}
}
html5/css3响应式页面的设计流程
第一步：确定需要兼容的设备类型、屏幕尺寸
第二步：制作线框原型
第三步：测试线框原型
第四步：视觉设计
第五步：前端实现