calc()制作自适应布局   

本文由大漠根据的《Imitating calc() Fallback or Fixed-Width Sidebar In Responsive Layout》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://osvaldas.info/imitating-calc-fallback-fixed-width-sidebar-in-responsive-layout,以及作者相关信息

——作者:

——译者:大漠

处理CSS的浏览器兼容性和解决技术问题才能尽显前端开发人员真正的魅力。没有项目可做的情况之下,我终于有了一次机会使用cale()函数的经验。

使用calc(),您可以通过计算来确定CSS属性值。

如果你还从未接触过calc(),你可以通过阅读《CSS3的calc()使用》一文来了解有关于calc()的基础知识——大漠

我想你可能知道,我也知道你已经看到这些例子,甚至在首页尝试使用过:

div{
    width: calc( 100% - 2.5em );
    background-position: calc( 50% + 50px );
    margin: calc( 1.25rem - 5px );
}

正如你所看到的,编写calc()需要一个更高的CSS水平。它是如此强大,前端开发人员不知道如何处理它。现在主流的浏览器(Android4.4)都支持这功能

明智的做法就是开始使用它。

情况

想象一上这种标准,是多么的痛苦:主内容和侧边栏通过浮动并列在一起,两者之间有一个间距。

响应式布局中模仿calc()或固定侧边栏

通常有一个容器包含了两个div,并且设置样式:

HTML

<div class="container">
    <div class="content">Content</div>
    <div class="sidebar">Sidebar</div>
</div>

CSS

.container:after,
.container:before {
  content:"";
  display: table;
}
.container:after {
  clear:both;
  overflow: hidden;
}
.container {
  zoom:1;
}
.container,
.content,
.sidebar{
  box-sizing: border-box;
  color: #fff;
}
.container{
  width: 100%;
  max-width: 80em; /* 1280 */
  padding: 2.5em; /* 40 */
  background: #eee;
}
.content,
.sidebar {
  padding:10em 1.25em;
}
.content{
  width: 80%; /* 960 */
  float: left;
  background: #8ac233;
}
.sidebar{
  width: 16.666%; /* 200 */
  float: right;
  background: #8ac233;
}

@media only screen and (max-width: 40em) /* 640 */{
  .content,
  .sidebar{
     width: 100%;
     float: none;
  }
  .sidebar{
     margin-top: 1.25em; /* 20 */
  }
}

看起来像一个完美的响应式布局和什么都没有添加,但是...

问题

响应式布局中模仿calc()或固定侧边栏

在我们的布局中有一个初始的小的侧栏和宽的内容区域。因此,当调整视窗大小,侧边栏很快变得紧紧的。当侧边栏太狭窄的时候我们应该做什么,过早移动内容?

解决方案

响应式布局中模仿calc()或固定侧边栏

通过calc()函数计算宽度,并给不支持calc的浏览器提供一个后备方案,就是固定宽度。通过给.content.sidebar两个类上做一个小小的修改,将会改变你的一切:

.content{
  width: 80%; /* 960 */
  width: calc( 100% - 15em ); /* 240 */
  float: left;
  background: #8ac233;
}
.sidebar{
  width: 16.666%; /* 200 */
  width: calc( 12.5em ); /* 200 */
  float: right;
  background: #8ac233;
}

如果你细心的话,你应该看到多添加了一行width:calc(12.5em),这就是技巧。为什么?让我们看看这些宽度都是成对——下在我们浏览器需要的。

第一对是width:80%(主内容)和width:16.666%(侧边栏),不支持calc()的浏览器将会无视calc()。这是用来做备份的。这意味着少数访问者访问网站看到窄的侧边栏。对于使用旧的浏览版本的人应该是完美的。

第二对是:width:calc(100% - 15em)width: calc(12.5em)。这是用于新的浏览器版本,这将会覆盖前面定义的固定宽度。有几个方面需要作个解释:

  • 主内容:calc(100% - 15em)= 100% - 侧边栏宽度 - 间距宽度。除了计算主内容元素的宽度,也要确保侧栏和主内容之间的间距总是等于2.5em(40px)。这样就完美。
  • 侧边栏:calc(12.5em)。可能有人会问,这里括号要添加空格吗?这是一个欺骗浏览器的伎俩。我把这称作为“模仿calc()备份”,但实际上它是不用也可括号也可以。

到了演示时间!我做了一个按钮开关来控制calc(),你可以试试:

demo

还有一件事

就像其他的一些CSS特性,calc()还是一个实验属性,在特定的浏览器下还需要添加特定的前缀。让更多的浏览器得到支持:

.content{
  width: 80%; /* 960 */
  width: -webkit-calc( 100% - 15em ); /* 240 */
  width: calc( 100% - 15em ); /* 240 */
  float: left;
  background: #8ac233;
}
.sidebar{
  width: 16.666%; /* 200 */
  width: -webkit-calc(12.5em); /* 200 */
  width: calc(12.5em); /* 200 */
  float: right;
  background: #8ac233;
}

有一种情况不能使用calc(),这是通过CSS的position属性。然而,如果侧边栏高于内容区域,整个布局会失败(这是你不希望看到的)。

通过一个简单的示例,向大家演示了如何使用CSS的calc()属性,给元素设置表达式,通过浏览器自身去计算需要的值。从而达到完美的自适应效果。

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

如需转载,烦请注明出处:

英文原文:http://osvaldas.info/imitating-calc-fallback-fixed-width-sidebar-in-responsive-layout

中文译文:http://www.w3cplus.com/css3/imitating-calc-fallback-fixed-width-sidebar-in-responsive-layout.html

返回顶部