8、创建无障碍体验与爱上表单开发

创建无障碍体验与爱上表单开发

1. 响应式网页设计

响应式网页设计由Ethan Marcotte提出，旨在通过一个代码库支持不同尺寸的桌面显示器和移动设备。这种方法虽非必需，但却是创建无障碍体验的重要一步。

1.1 示例分析

以Jon Hicks的作品集网站（http://hicksdesign.co.uk ）为例，该网站通过灵活的网格和样式表中的最小宽度（min-width）、最大宽度（max-width）值，实现了在不同显示尺寸下的自适应。当调整窗口大小时，网站的列数会相应地从四列变为三列、两列，最终变为一列。

1.2 技术实现

• 流体网格 ：使用灵活的网格布局，使列能够根据可用屏幕空间进行自适应。
• 灵活图像 ：在样式表中添加 img {max-width: 100%;} ，确保图像不会超出显示设备的宽度。
• 媒体查询 ：根据设备的分辨率和视口大小，提供独特的样式表。例如：

@media screen and (max-width: 600px) {
  body { 
    font-size: 80%; 
  }
  #content-main {float: none; width: 100%;}
}

当设备的最大宽度为600像素时，页面字体大小将变为正常大小的80%， #conte