首页 > 前端 > 利用CSS3中的clac()实现按照屏幕分辨率自适应宽度
2021
09-12

利用CSS3中的clac()实现按照屏幕分辨率自适应宽度

1、简介
  calc()看其外表像个函数。平时在制作页面的时候,总会碰到有的元素是100%的宽度(例如body元素)。如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破。比如说,有一个边框,或者说有margin和padding,这些都会让你的盒子撑破。我们换句话来说,如果你的元素宽度是100%时,只要你在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异模式)。平时我们碰到这样的现象时,只能通过改变结构来实现,有时甚至无法解决。就算你通过繁琐的方法实现了,但由于浏览器的兼容性而导致最终效果不一致。虽然上一篇随笔介绍的CSS3属性中的box-sizing在一定程度上解决这样的问题,但calc()函数功能实现上面的效果来得更简单。
2、语法
  calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:
  calc() = calc(四则运算);
  说明:
  用于动态计算长度值。

        需要注意的是,运算符前后都需要保留一个空格,表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格;

        例如:width: calc(100% - 10px)

        设置div元素的高度为当前窗口高度-100px

           height:calc(100vh - 140px)

        可以使用百分比、px、em、rem等单位;

        任何长度值都可以使用calc()函数进行计算;

        calc()函数支持 "+", "-", "*", "/" 运算;

        calc()函数使用标准的数学运算优先级规则;

3、浏览器兼容性
  浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符。
  (-moz-、-webkit-)


本文》有 0 条评论

留下一个回复