Power's Wiki
·
Adaptive Web Design
💡
原文中文，约1300字，阅读约需3分钟。
📝
内容提要
本文介绍了自适应网页设计的思想和方法，包括允许网页宽度自动调整、使用相对大小的字体、流动布局、选择加载 CSS 和图片的自适应等。建议不要使用绝对定位。同时，提供了加载不同 CSS 文件的方法。
🎯
关键要点
- 自适应网页设计的思想是一次设计，普遍适用。
- 网页宽度自动调整需在代码头部加入<meta name='viewport' content='width=device-width, initial-scale=1' />。
- 不使用绝对宽度，采用相对宽度如width: xx%;或width: auto;。
- 字体大小应使用相对单位，默认大小为100%即16像素。
- 流动布局使各个区块位置浮动，避免水平滚动条的出现。
- 尽量避免使用绝对定位（position: absolute）。
- 根据屏幕宽度选择加载不同的CSS文件。
- 图片应设置为自适应，使用img { max-width: 100%;}。
➡️
