你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
weifengsn

CSS3新单位:calc()未来自适应布局利器! 1个回复 专栏 @ CSS

weifengsn 发布于 2 年前

前言

介绍前大家可以先考虑一个布局的问题:

页面中有两个元素:ele 1和ele 2,他们之间还有跟页面左右的间隔都是30px,宽度随着页面宽度而自适应。

效果图:

这个问题有很多种解决办法,大家可以想一想。下面我会给出关于这篇文章的解决办法。

什么是calc()

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,类似px,100%,也能表示元素的长宽等。 是不是想起了IE的expression?

calc()能做什么

calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说

width:calc(50% + 2em)

calc()语法

calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:

.elm {
  width: calc(expression);
}

其中"expression"是一个表达式,用来计算长度的表达式。

calc()的运算规则

  • 使用“+”、“-”、“*” 和 “/”四则运算;
  • 可以使用百分比、px、em、rem等单位;
  • 可以混合使用各种单位进行计算;
  • 表达式中有“+”和“-”时,其前后必须要有空格,如"widht:
  • calc(12%+5em)"这种没有空格的写法是错误的;
  • 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

文中问题的答案

说到这里大家应该会想到解决办法,这里给出代码:

html:

<div class="container">
    <div class="ele1">
        ele 1
    </div>
    <div class="ele2">
        ele 2
    </div>
</div>

css:

.container{
    width: 500px;
    height: 300px;
    background: #ffffff;
    margin: 50px auto;
}
.ele1{
    float: left;
    margin: 30px 15px 0 30px;
    width: -webkit-calc((100% - 90px)/2);
    background: red;
}
.ele2{
    float: left;
    margin: 30px 30px 0 15px;
    width: -webkit-calc((100% - 90px)/2);
    background: green;
}

其他解决办法:

  • flexbox(简直就是神器)
  • table貌似也可以
  • 其他方法

兼容性

目前来看还是很不错的。 caniuse传送门

  • 一米

    要是做混合 app ,安卓 4.1 4.3 不得不考虑啊,其他版本简直神器。但是国内很多改过的 Android 也很要命。

    #1
登录后回复,如无账号,请使用邀请码注册