免费资源:哥德巴赫猜想一个选项卡宽度

http://www.itjxue.com  2015-08-02 12:42  来源:未知  点击次数: 

  从网页选项卡诞生的那一天起,凭借其紧凑的布局和方便的切换方式,就成为各大门户必用的设计元素。让我们来看看这些五花八门的选项卡吧

  

 

  规则的宽度–比如150px、300px…合适的选项卡数量:2个、4个…使这些选项卡都恰好能平分宽度,在各大浏览器中完美呈现。

  忽然有一天,当你的网站需要移植到iPhone,或是其他移动设备上,你得在一个宽度是320px–并且随时有可能切换为480的屏幕上设计这样一组切换卡时,问题就来了。

  在手机,这种资源有限的移动设备上设计网页的的第一原则是什么?那就是充分利用屏幕。我们的网页两边不再会有几十、几百像素的空隙—取而代之的是仅仅几个像素,在这个例子里,这个数值是4——当然你也可以取其他数值,但是问题还是同样会存在的;随着方向改变,手机屏幕的宽度也在切换,你的页面内容应该自适应这种变化,仍然充满整个屏幕。

  

 

  这时,我们的选项卡宽度就不能是一个固定值,而要使用百分比了。对于2、4、5这样能被100%整除的数,这个取值很容易,每个选项卡的宽度就是50%、25%、20%;对于3、6、7这样不能整除的数,应该怎么办呢?哈,幸好我们还有一点数学基础,以一组3个选项卡为例:33.3% + 33.3 + 33.4%这样的分法也不错,加起来能够凑到100%,选项卡之间0.1%的宽度差,应该是0.3-0.4像素,可以忽略。好,让我们看看这样的分法结果如何?

  FireFox、ie下,如上图,非常和谐。

  Safari和Chrome下:

  

(责任编辑:IT教学网)

更多

推荐免费资源文章