前端布局原则：不使用方向命名，不使用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

 

转载于:https://www.cnblogs.com/sink_cup/archive/2010/05/24/layout_principle_Ubuntu_bug.html

相关资源：数据结构—成绩单生成器