前端布局原则：不使用方向命名，不使用px像素锁定

前几天折腾Ubuntu 10.04，由于用的是18.5英寸的小显示器，分辨率是1366*768。屏幕的高度768很低，所以想把任务栏调成竖起来。

结果把ubuntu 10.04的任务栏竖起来以后，有些错位，日期竖着了。

看了~里面的panel的配置文件，里面有两个文件夹 top_panel 和 bottom_panel，这个命名不遵守“布局原则”。

前端通用布局原则：

• 不使用方向命名。
• 不使用px像素锁定，考虑字号放大后的效果。

网页布局原则：

• 超过浏览器分辨率的高宽后，使用滚动条。

软件布局原则：

• 最大高度为屏幕分辨率高度，如果超过用户很难操作

使用方向命名的缺点——把属性写在了名字里，导致属性不能变化，比如：

#sidebar
{
float:left;/*正确*/
}

可以随时改成：

#sidebar
{
float:right;/*正确*/
}

因为放在“左边”还是“右边”是边栏的一个属性。不遵守这个原则就会出现这个荒诞的情况：

#left_sidebar/*错误*/
{
float:right;/*错误*/
}

使用px锁定是落后的网站和软件的布局方式，导致不能支持字号放大。

以前只有浏览器能放大字号（Firefox中设置最小字体大小），结果大部分网站都错位。

body
{
font-size:12px;/*错误*/
}

body
{
/*不声明font-size，正确，电脑浏览器默认16px，手机浏览器待定*/
}

在Windows 7中，软件也可以进行字号放大了，在控制面板——显示 中设置放大。然后就可以看到一些软件错位了。

参考资料：

• 《Web 标准实战》
• 《精通CSS：高级Web标准解决方案》——图灵程序设计丛书

Follow the standards, break the rules