通过响应式布局让网站在不同屏幕大小的设备中能够得完美的展示
响应式界面的四个层次:
1、同一页面在不同大小和比例上看起来都应该是舒适的；
2、同一页面在不同分辨率上看起来都应该是合理的；
3、同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；
4、同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。

宏观思路

  • 从需要适应的最小设备开始设计然后逐步适应较大的设备

媒介查询

1
2
3
4
5
6
@media (min-width='500xp'){
}
@media(max-width='500px'){
}

零界点的选择

  • 根据设计的网站内容选择临界点，主要是使网站能够更好的在不同的尺寸的设备上展现更好的效果，没有标准的临界点，只有能让你的网站更好的展示的临界点

响应式图片

为能够在不同屏幕大小的设备中让图片不失真，需要在不同分辨率的屏幕中显示不同分辨率的图片