搜索

2011年11月18日星期五

可缩放网页设计

最近把我的主页重新设计了一下,简单、干净,更重要的是,适应任意页面尺寸。下面我就简单记录一下这是如何实现的。

技术要求:
  • HTML
  • CSS
实现

基本原理是:
  1. 用相对长度单位取代绝对值
  2. 设置越少越好
对于真正的 HTML/CSS 来说,他们本来就是设计为不依赖任何特定设备、媒介的数据格式,所以设计时别假设呈现媒介是什么样的——简单的说,设计者不知道未来显示这些数据的设备是什么样的,具有什么尺寸、字体或是别的能力。

应对的方案很简单,尽量别设置,假定终端设备自己才最知道如何显示是最佳的。HTML/CSS 规范本身定义了很好的默认值,除非有特别的理由,否则别改!如果某个属性值依赖特定设备,特别是尺寸,那么别设,留给终端设备自己判断。

具体的说,我主要使用 em/ex 来设置长度(em 用于 box 以外,ex 用于以内),弃用其他绝对尺寸;字符大小用 large/small 取代 px

首先,设置 html/body 元素长宽为 100% (不过如果真这么干,你会发现,至少我在 Firefox 下发现,会出现滚动条,因此我选择90%),然后整个页面的实际尺寸就会是视角的 100%

然后,设置其他的布局元素,例如 div header width 62%/height 14% 我的主页就是这么干的。

最后,把图片用 div 包起来,设置图片尺寸为 div 的 100%

现在你知道如何实现可伸缩页面了吧?

没有评论:

发表评论