网页布局的几种方式：
1.静态布局：
意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置.
2.自适应布局：
就是说你看到的页面，里面元素的位置会变化而大小不会变化
3.流式布局：
流式布局是以百分比作为单位的你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
4.响应式布局：
每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。可以在手机、平板、电脑三种终端完美响应。
5.弹性布局：
弹性布局是以em作为单位的，同样弹性布局也支持如下公式：
百分比尺寸 = 目标元素尺寸 / 上下文元素尺寸
使用em将文字像素px转换为相对单位，现在浏览器默认文字的大小是16px，如果一个文字大小是48px，上下文元素是(浏览器)，那么转换成em 就是 48/16 = 3em.
但是如果一个h1标签的font-size是48px, h1标签内部span标签font-size 是24px,那么h1标签的font-size = 48 / 16 = 3em h1 span {font-size = 24/16 =1.5em}.弹性布局也支持响应性web设计。
总结
响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会
所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式,流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。
响应式/自适应网页设计好处是各种不同的设备下都能正常浏览器，且不需要编写不同的版本，缺点是当页面代码结构代码结构非常复杂，此时用响应式网页编写难度就更大了。
媒体查询