css3 响应式神器 calc()

Aldous 发布于2019-08-30 12:51 / 3317人阅读

摘要：背景大家经常为遇到类似卡片的设计稿，如果卡片与卡片之间没有距离，如那写是没有什么问题的那如果是以下这种情况呢图片与图片之间的距离是，那响应式处理起来难免麻烦。但是这些方法难免会让宝宝心里崩溃。

背景：

大家经常为遇到类似卡片的设计稿，如果卡片与卡片之间没有距离，如

那写 width: 33.33%是没有什么问题的

那如果是以下这种情况呢

图片与图片之间的距离是 20px，那响应式处理起来难免麻烦。虽然可以通过 js 计算宽度解决，或者修改布局使用 box-sizing 解决。但是这些方法难免会让宝宝心里崩溃/(ㄒoㄒ)/~~。接下来开始介绍 calc()

是什么

css3 新增的一个函数取值，用于动态计算长度值，参数可以是百分比、em、px和rem单位值，如width: calc(100% - 22px)。
如上面的例子，可以这样解决 width: calc((100% - 40px)/3)。是不是酷酷哒~~

语法

calc()函数支持 +, -, *, / 运算，可以单一单位或者混合单位使用。

.div {
  width: calc(80% - 10px);
}

注意:

+ , - 号前后需要使用空格隔开，不可写成 calc(100px-2px)

* , / 号前后可不需要空格隔开

兼容性

兼容性前缀：

.div {
  width: calc(80% - 10px);
  /*Firefox*/
  width: -moz-calc(80% - 10px);   
  /*chrome safari*/
  width: -webkit-calc(80% - 10px); 
}

在 less 如何使用

需要在参数外面加上: ~("expression")，如：

 .div {
  width: calc(~"100% - 80px");
}

最后

类似的 css3 函数还有:

min()：min(10% + 20px, 300px) // 用于比较数值的大小并取出最小的那个
max()：max(10% + 20px, 150px) // 用于比较数值的大小并取出最大的那个
cycle(): //允许子孙元素使用取值序列中的值循环替换继承而来的值

但是但是但是目前这三种函数还没有浏览器支持/(ㄒoㄒ)/~~，让我们一起等待这牛逼函数得到支持~ ~

GPU云服务器云服务器响应式响应式布局响应式网站响应式设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115120.html

CSS5:移动端页面(响应式)

摘要：接下来做端一般都写手机最大也就先隐藏手机菜单和按钮优先级问题解决方法直接使用用谷歌开发者工具查看优先级里面的垂直居中再把写成布局只要改成里面的子项目就变成一行了菜单导航导航导航导航导航到航导航导航导航导航方法切换元素的可见状态。 CSS5:移动端页面(响应式) 如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你...

superPershing 2019-08-30 15:53 评论0 收藏0
css中的几个单位——rem，视口单位和ch

摘要：基于视口的单位视口单位可以用来什么，比如实现响应式设置相对视口的宽度和高度，可以实现水平垂直居中实现网格布局将图片按照屏幕的比例显示这几个单位是相对于视口的，也就是可视区域，总共分成了份。 rem rem是设计响应式网页的神器，因为rem单位是相对HTML元素的font-size属性的，因此当使用rem作为属性单位时，当改变HTML元素的font-size，其他使用rem作为单位的元素...

leiyi 2019-08-29 15:34 评论0 收藏0
css中的几个单位——rem，视口单位和ch

摘要：基于视口的单位视口单位可以用来什么，比如实现响应式设置相对视口的宽度和高度，可以实现水平垂直居中实现网格布局将图片按照屏幕的比例显示这几个单位是相对于视口的，也就是可视区域，总共分成了份。 rem rem是设计响应式网页的神器，因为rem单位是相对HTML元素的font-size属性的，因此当使用rem作为属性单位时，当改变HTML元素的font-size，其他使用rem作为单位的元素...

weij 2019-08-26 11:56 评论0 收藏0
视口相关单位的应用 —— 别说你懂CSS相对单位

摘要：还有视口相关单位，依赖浏览器的视口大小来定义长度的。如果你不熟悉视口相关单位的话，在这里简单介绍一下。笔记视口相关单位对于大多数浏览器还是一项比较新的特性，所以当你试图把这个特性和其他样式混搭时，有可能会有一些很奇怪的。前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对rel...

lbool 2019-08-29 16:06 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0