calc()2


本文由大漠根据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)都支持这功能


height="370" src="http://caniuse.com/calc/embed" width="100%">

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


情况

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

响应式布局中模仿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://www.w3cplus.com/css3/imitating-calc-fallback-fixed-width-sidebar-in-responsive-layout.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值