CSS3的calc 函数在响应式网站制作中的妙用

先看css3中的calc()的定义
定义与用法calc() 函数用于动态计算长度值 。需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);任何长度值都可以使用calc()函数进行计算;calc()函数支持 "+", "-", "*", "/" 运算;calc()函数使用标准的数学运算优先级规则;

CSS3的calc 函数在响应式网站制作中的妙用

文章插图
css
下面开始讲解,我们网站中经常会有有显示新闻和日期的这种需求,下面说一个经常使用的场景,如下图:
CSS3的calc 函数在响应式网站制作中的妙用

文章插图
 
html代码如下:
<ul class="article"> <li> <span class="title"> <a href=https://www.isolves.com/it/cxkf/yy/CSS2/2019-06-21/"/news/1041.cshtml">标题............... 2019-06-19 .......css代码如下:
.article li { clear: both; overflow:hidden;}.article li .title { float:left; width:400px;}.article li .date { float: right; width: 85px;}通过代码我们可以看到,给标题部分加了一个宽度400px,给日期部分加了宽度85px,这段css代码看起来没有什么问题 。
某一天领导说,咱们的网站要改成响应式网站,那么怎么办呢?传统解决办法是采用宽度百分比+配合媒体查询
1、先改为百分比,改进后的代码如下:
.article li { clear: both; overflow:hidden;}.article li .title { float:left; width:80%;}.article li .date { float: right; width: 20%;}这种写法弊端是,不同屏幕尺寸不一样,百分比你很难确定标题和日期部分的比例占多少,在电脑端你确定后了,但是在ipad和手机端就会出现变宽度过大或过小的问题,所以这时候就要对ipad和手机端额外添加一个类似下面的媒体查询样式(和bootstrap的栅格系统类似) 。
/*手机端*/@media (max-width: 767px) {.article li .title { width:60%;}.article li .date { width: 40%;}}/*ipad端*/@media (min-width:768px) {.article li .title { width:70%;}.article li .date { width: 30%;}} /*平板电脑端*/@media (min-width: 992px){.article li .title { width:75%;}.article li .date { width: 25%;}}....../*其他端...*/这样写是不是很x疼?修改和维护起来都特别不方便,这时候就要用到calc() 了,最终改进后的css代码图如下:
.article li { clear: both; overflow:hidden;}.article li .title { float:left; width: calc(100% - 85px); overflow: hidden; text-overflow: ellipsis;}.article li .date { width: 85px;}日期部分的宽度85px保持不变,那标题部分的宽度就是100%-85px,calc()很方便的解决了这个问题,是不是瞬间感觉css的代码量少了很多 。
上面代码只写了核心部分,大家可以自行根据自己项目需求美化完善 。
如果大家有更好的建议可以评论留言,欢迎大家转发 。
 

【CSS3的calc 函数在响应式网站制作中的妙用】


    推荐阅读