跳到主要内容

设计流程

  • 弹性网络
  • 液态布局（%）
  • 弹性图片显示
  • 使用 CSS Media Query 技术
  • 使用 Javascript 脚本控制

弹性布局有缺陷：大的图片可以轻易破坏页面结构，即使是弹性的元素结构，在极端的情况下，仍会破坏布局。所以，使用响应式的设计可以使页面更加有弹性，图片尺寸自动调节。

兼容需要兼容的设备类型、屏幕尺寸​

  • 设备类型： 包括移动设备（手机，平板）和 PC 。对于移动设备，设计和实现的时候要注意增加首饰的功能
  • 屏幕尺寸： 包括各种手机的尺寸，包括横向或纵向。

响应式图片​

比较流行的是 max-width: 100%; ，而老版的 IE 不支持，需要用 Ethan Marcotte 开发的专用插件 imgSizer.js。