在进行自适应布局的时候有时候会碰到需要有给固定宽高的地方,比如一个div宽度为屏幕尺寸的一半,但是有10px的padding,那在这种情况下假如我们直接给宽度50%,或者计算完之后的rem单位,再给padding,.因为盒模型的关系导致其宽度为50%+20px。但是又因为50%是一个不固定的值,导致很难计算出一个具体的值,在这种情况下我们就可以使用css3中的一个计算方法,calc(),可以设置
div{calc(50% - 20px);}
这样设置之后得到的结果就是计算之后的结果,任何需要给具体的值的地方都可以使用calc来进行计算,不过需要主要目前此方法只能进行+ - * /的四则运算,并且在计算符号前后都需要有一个空格。当然上面的50%也可以换成计算之后的rem单位。
注意点:
calc 内部的表达式,在使用运算符号时,两遍必须加上空格(虽然乘除可以无视,但还是建议带上)!!!!!,不然会解析错误!!,看演示写法
calc(10 * 10px);
calc(50% - 50px);
calc(50% + 5em);
calc(10% / 1rem);
通过这些在方法在进行自适应布局的时候就可以更加的得心应手了~~
结论
使用rem单位以及calc()方法在进行自适应布局非常强大,可以配合媒介查询,可以非常灵活的控制各种元素的自适应。
calc(100% - 20px);啥意思
css3 的 calc()函数。这里的意思是设置宽度比100%的宽度少20px。