CSS Media查询百分比说明

时间:2013-08-16 19:43:30

标签: css css3 media-queries

我知道这是一个基本问题,但我无法弄清楚这一点。在Wordpress主题CSS文件里面我看到了这个代码(CSS媒体查询)。

.site-content {
    float: left;
    width: 65.104166667%;
}

所以我的问题是:为什么宽度百分比设置为这种方式而不是65.1%?

如何编码该网站的人知道该宽度必须完全 65.104166667%而不是 65.104166666 %(他/她用什么工具准确得到这个百分比数字)?

最后使用这种方法的好处 /风险是什么?

如果有人可以通过回答或链接指出我正确的方向,我会非常感激。

1 个答案:

答案 0 :(得分:1)

请参阅有关自适应网页设计的文章:http://alistapart.com/article/fluidgrids

如您所见,有一个将像素宽度(固定宽度)更改为百分比的基本公式。如果你阅读这篇文章,你会看到公式是:

  
    

目标/上下文=结果

  

或换句话说:

  
    

您瞄准的宽度(以像素为单位)除以浏览器的默认字体大小(通常为16px)等于以ems或百分比表示的宽度。

  

除以默认字体大小的原因与在小学的科学实验中需要控制物质的原因相同。一种中性物质,用于与其他实验进行比较。

所以为了得到65.1041 ......等等,这个人按像素划分了他们想要的宽度,然后达到了这个百分比。百分比和ems是您希望在网页设计中使用以获得响应式网站的度量单位。所需要的只是一些简单的数学。

我个人的偏好是舍入到2-3个小数位,但除非你必须具有精确宽度,否则它无关紧要。我已经在这个网站上无数次推荐上面的文章,对于现在的任何网页设计师来说都是必读的。