HTML屏幕适配

经过学习，现在主流的屏幕适配的做法有，流式布局、响应式布局、自适应布局、静态布局。

1.流式布局----指布局从上到下，像水流一样顺序布局，一般宽度使用百分比，高度使用固定值；优点是，如果设备的屏幕宽度变化了，可以自动适应，缺陷是由于宽度是自适应的，高度是固定的，所以会导致比例失衡，只有在部分开发预设宽度下会效果较好。流式就是当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载。

2.响应式布局----使用css3的media query媒体查询，可以获知访问网页的设备屏幕分辨率，然后根据不同分辨率，调用不同的css文件效果。缺点是工作量大，维护性难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法。

3.自适应布局---自适应与响应式的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式。

4.静态的就是采用固定宽度的了,是固定页面宽度的做法，超出部分留白。缺点是，如果屏幕很大，会有很多地方都是空白的。