20190401 网页布局中的自适应与响应式

自适应

根据不同的屏幕设备设计不同的样式，自适应网页也被称为逐渐增强的网站。

• 渐进增强 Progress enhancement

  先实现一个满足大部分设备基础功能的版本，然后，针对性的兼容的增加一些新功能和新特性，逐步的拓展应用。

• 图片自适应

  (1)设置最大宽度和高度 max-width: 100%；目的是为了避免放大图片后图片失真。
  (2)针对不同的屏幕尺寸给出相应的图片

响应式

通过调整元素的位置去适应可用空间来响应浏览器窗口或者设备尺寸的一个变化。

• 具体方案

  媒体查询，弹性盒子，百分比布局，相对单位

补充

优雅降级和渐进增强

• 优雅降级： 在新式浏览器中都能正常工作 + 针对不同版本的IE使用hack降级 + 为无法支持的功能增加候选方案

• 渐进增强：被所有浏览器支持的基本功能 + 只有新式浏览器才支持的功能 + 无害于基础浏览器的额外样式和功能