calc()制作自适应布局

标签：

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

——作者：Osvaldas Valutis

——译者：大漠

处理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)都支持这功能。

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

情况

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

通常有一个容器包含了两个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的浏览器提供一个后备方案，就是固定宽度。通过给.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

calc()制作自适应布局

标签：

原文地址：http://www.cnblogs.com/liuchengfeng/p/5000249.html