选择CSS的维度标准;百分比与像素

时间:2012-03-05 19:29:28

标签: css cross-browser positioning css-float

客户已请求设计媒体网站,并强调布局应在桌面,笔记本电脑和平板电脑上一致显示(移动设备将使用不同的布局)。他们想要一个两列布局,其中列彼此独立滚动。由于没有正式的培训和很少的CSS经验,我希望一些CSS专家可以权衡使用百分比进行CSS大小调整的优缺点。

一些问题:

1)我认为不同设备上的分辨率数量会导致具有指定像素高度的元素的大小不一致。使用像素高度是否有问题?

2)是否有任何浏览器或设备无法识别百分比元素大小?

3)它是否会在将来的编码中引起问题(即,在JavaScript中按百分比调整元素大小有什么问题吗?)

4)以下CSS在我用于测试的Mac上完成了我在Chrome,Firefox和Safari中所寻找的内容。是否有任何浏览器或设备使用此CSS会出现意外行为?

#wrapper { position: relative; width: 99.9%; margin: 0 auto; } 
#left { position: absolute; left: 0; float: left; width: 31%; margin: 0 2% 0 0; height: 100%; overflow: auto; }
#right { position: absolute; float: right; margin: 0; width: 66%; height: 100%; overflow:auto; }

5)百分比大小会自动调整调整大小事件或方向更改吗?

6)是否有标准的最小装订线尺寸,以便在布局中间容纳滚动条?

7)在选择CSS元素大小的百分比时,是否有任何因素我忽略了?

1 个答案:

答案 0 :(得分:1)

快速而肮脏的答案。

  1. 可以,特别是在维护方面。像素是过去的一个单位。我建议使用em或百分比。
  2. 除非您希望支持基于控制台的浏览器,否则<。li>
  3. 没问题。
  4. 我没有经过测试,但即使对于IE,这看起来还不错。
  5. 是的。
  6. 不,不要费心找到一个。某些设置甚至可能不显示滚动条(即大多数浏览器在OS X Lion上运行)
  7. 不是。没有我能想到的。