您现在的位置是:首页 > 学无止境 > Web网站首页Web CSS3响应式布局的计算函数calc()

CSS3响应式布局的计算函数calc()

  • Web
  • 2019-06-15
简介CSS3提供的函数calc(),是calculate(计算)的缩写,具有计算的能力,允许通过+ - * / 运算符构成一个数学表达式,最终产生一个具体的value值。calc()是动态计算,任何数值都可以用这个函数计算,比如width,height,font-size,margin,padding等。对于弹性布局有很大的好处。
字数 7188.5

CSS3提供的函数calc(),是calculate(计算)的缩写,具有计算的能力,允许通过+ - * / 运算符构成一个数学表达式,最终产生一个具体的value值。calc()是动态计算,任何数值都可以用这个函数计算,比如width,height,font-size,margin,padding等。对于弹性布局有很大的好处。

兼容性还不错,IE9都支持。

calc.PNG

一、calc()语法结构

property:就是要计算的属性,可以是 <length>(长度), <frequency>(频率), <angle>(角度), <time>(时间), <percentage>(百分比), <number>(数值), or <integer>(整数)。

expression:表达式,就是+ - * /的四则运算。可以使用混合单位,比如px、%、em、rem、vw、vh等。

  •  

    + - 运算符的前后必须有空格,如果没有空格,比如calc(50%-8px),会被认为是50%后面跟了一个负值(-8px),而calc(50% - 8px),才是认为50%减去8px。calc(50% + -8px),表示50%加上一个负8px。

  •  

    * /前后可以不需要空格,但是推荐使用空格隔开。

  •  

    calc()函数可以嵌套,内部的函数当成普通的圆括号。比如calc( calc( 100% / 2) / 2),就等价于calc(50%/2)。

  •  

    当用于控制文字大小时,确保其中一个值包含相对长度单位,比如font-size: calc(1.5rem + 3vw),这样可以确保在缩放页面时,文本大小可以缩放。

二、案例部分

1、侧边栏固定大小,主体内容自适应。间距固定不变。

2、三等分页面,边距不变。

3、边距固定,永远水平垂直居中对齐的盒子。

4、等分弹性盒子,间距不变。

5、字体大小计算

随着屏幕的尺寸变化,字体也跟着发生大小的变化,在以前利用media queries直接改变文字的大小,使得文字的变化很突兀,而利用calc(),可以让文字一直不断的动态改变。

如果使用min-width来进行设计:

格式:font-size:calc(最小字体值 + (最大字体值-最小字体值)*(100vw-最小屏幕大小)/(最大屏幕大小-最小屏幕大小))

如果使用max-width进行设计:

格式:font-size:calc(最大字体值 + (最大字体值-最小字体值)*(100vw-最大屏幕大小)/(最大屏幕大小-最小屏幕大小))

 


转载: 感谢您对莫愁个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源莫愁个人博客 https://www.mochoublog.com/study/257.html”。

文章评论

    • 评论
    人参与,条评论

技术在线

服务时间

周一至周日 12:00-22:00

关闭下雪
关闭背景特效