自适应
根据不同的屏幕设备设计不同的样式,自适应网页也被称为逐渐增强的网站。
-
渐进增强 Progress enhancement
先实现一个满足大部分设备基础功能的版本,然后,针对性的兼容的增加一些新功能和新特性,逐步的拓展应用。
-
图片自适应
(1)设置最大宽度和高度 max-width: 100%;目的是为了避免放大图片后图片失真。
(2)针对不同的屏幕尺寸给出相应的图片
响应式
通过调整元素的位置去适应可用空间
来响应浏览器窗口或者设备尺寸的一个变化。
-
具体方案
媒体查询,弹性盒子,百分比布局,相对单位
补充
优雅降级和渐进增强
-
优雅降级: 在新式浏览器中都能正常工作 + 针对不同版本的IE使用hack降级 + 为无法支持的功能增加候选方案
-
渐进增强:被所有浏览器支持的基本功能 + 只有新式浏览器才支持的功能 + 无害于基础浏览器的额外样式和功能