calc()函数及vmin,vmax,vh,vw的认识,在family里的实战运用

csscalc()函数用于动态计算长度值;

比如下面这个,

font-size: calc(10px + 2vmin);

控制字体缩放。

这里的vmin(相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin);

比如我们的视口长150mm,宽200mm,现在我们的取值就是最小的那个150mm,计算公式就是  (150*2)/100;所以2vmin

的值是3;calc(10px + 2vmin) = 13px;只是计算结果,再就是,如果值小于12px;字体大小浏览器还是取12,如果要变更小,就得用缩放transform:scale();

vmin是相对于视口最小值,那还有vmax 不用说也知道了吧;

还有vw,和vh,vw指相对于宽度,vh值相对于高度;计算公式和vmin一样,只是取值不同;

IE9仅支持使用 vm 代替vmin;

在运算符‘+’前后都有空格

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403535.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C->Cpp】深度解析#由C迈向Cpp(2)

目录 (一)缺省参数 全缺省参数 半缺省参数 缺省参数只能在函数的声明中出现: 小结: (二)函数重载 函数重载的定义 三种重载 在上一篇中,我们从第一个Cpp程序为切入,讲解了Cpp的…

MySQL主从数据库配置

公司有未知台服务器,以后都要自己来接管。MySQL主从是必需要会的技术,所以加强学习一下以图以后安稳日子啊! 主服务器(master): 192.168.30.204,用yum安装的MySQL.(内有多个库) 从服…

转: ant condition使用

评注: 用c语言的方式来,比喻ant...比较好理解 转: http://www.smithfox.com/?e176 [备忘] Apache Ant中的逻辑判断 [原创链接: http://www.smithfox.com/?e176 转载请保留此声明, 谢谢!! ] 在写Ant时有时免不了要简单的逻辑, 本文并没有创造…

Epoll在LT和ET模式下的读写方式

From: http://www.ccvita.com/515.html 在一个非阻塞的socket上调用read/write函数, 返回EAGAIN或者EWOULDBLOCK(注: EAGAIN就是EWOULDBLOCK) 从字面上看, 意思是:EAGAIN: 再试一次,EWOULDBLOCK: 如果这是一个阻塞socket, 操作将被block,perror输出: Res…

react 创建

1&#xff1a;可以html页直接引入 <script src"../build/react.development.js"></script><script src"../build/react-dom.development.js"></script><script src"../build/babel.min.js"></script> 2&a…

《精彩绝伦的CSS》读书笔记(二)

3.2 大多数允许使用多个关键字的CSS属性都允许以任何顺序书写关键字,但font属性是很少见的例外之一.font: <font-size> <font-family>;这连个只必须按照既定的顺序进行书写,如果顺序颠倒或者漏掉了其中一个,浏览器会完全忽略这条声明. 其他关键字全部都得放在这两个…

Session机制详解

虽然session机制在web应用程序中被采 用已经很长时间了&#xff0c;但是仍然有很多人不清楚session机制的本质&#xff0c;以至不能正确的应用这一技术。本文将详细讨论session的工作机制并且对在 Java web application中应用session机制时常见的问题作出解答。 一、术语ses…

element-ui的表单校验;el-form表单校验;el-form表单自定义校验;手机号校验;车牌号校验;车牌号正则校验;手动校验表单某一项;手动清空表单的某一项校验结果

示例&#xff1a;代码在末尾 可以直接复制使用 一、基本属性认知&#xff1a; 1. required: true 会有 * &#xff0c; 但仅是触发最后点击提交按钮时&#xff0c;校验某一项位必填&#xff1b;与输入事件或者选择或者失焦时候 怎么校验无关 &#xff08;这时候的校验取决于是…

npm eject 暴露webpack报错,less或sass添加报错

在使用react时候&#xff0c;添加sass或者less&#xff0c;需要暴露config里的webpack出来&#xff0c;直接npm eject会暴以下错&#xff1b; Usage: npm <command> where <command> is one of: access, adduser, audit, bin, bugs, c, cache, ci, cit, …

Eclipse For JavaSE安装、配置、测试

Eclipse For JavaSE安装、配置、测试(win7_64bit) 目录 1.概述 2.本文用到的工具 3.安装与配置 4.JavaSE开发测试 5.ADT安装与Android开发测试 6.注意事项 7.相关博文 >>看不清的图片可在新标签打开查看大图 1.概述 eclipse应该是Java开发界家喻户晓的IDE了&#xff0c;通…

关于GNS3占用很大CPU的问题,很大可能对你有用

在用GNS3的时候不知道为什么&#xff0c;CPU居高不下&#xff0c;占据100%&#xff0c;拼命计算IDLE值&#xff0c;甚至使用上了BES软件&#xff0c;都没用&#xff0c;后来在51CTO看到有个朋友回帖说是更改一下RAM应该可以。我发现GNS3给每台设备默认是分配128M&#xff0c;于…

Typescript学习;Typescript总结;Typescript 的数据类型有哪些?

推荐一个学习Typescript的网址&#xff0c;写的特别清晰易懂&#xff0c;比官网好理解&#xff1a;Typescript文档整理 一个总结&#xff1a;Typescript 的数据类型有哪些

epoll的两种模式

From: http://haoningabc.iteye.com/blog/1432958 linux异步IO浅析 http://hi.baidu.com/_kouu/blog/item/e225f67b337841f42f73b341.html epoll有两种模式,Edge Triggered(简称ET) 和 Level Triggered(简称LT).在采用这两种模式时要注意的是,如果采用ET模式,那么仅当状态发生…

react 添加less预处理语言

首先是安装react react创建 创建完了&#xff0c;添加react 首先cnpm i less less-loader --save-dev 下载完成后执行&#xff1a;npm run eject&#xff1b;暴露config等一些配置文件 config目录有个webpack配置文件&#xff0c;修改 const cssRegex /\.css$/; 改成 con…

微软公布 Windows Phone 8 多项新特性

多款热门游戏登陆WP8 全新锁屏界面可浏览Facebook图集 数据压缩服务DATA SENSE 鲍尔默宣布WP8终端上市细则 10月30日消息&#xff0c;微软今日凌晨于美国旧金山公布Windows Phone 8诸多新特性&#xff0c;并宣布了诺基亚、HTC以及三星多款WP8终端美国上市日期及运营商定制方式。…

博客地址迁移

博客地址迁移 新的文章不在博客园写了&#xff0c;有兴趣关注本人博客的请移步 https://github.com/jsCoder-yy 另外&#xff0c;旧的博客内容也会逐步迁移到github上。posted on 2016-06-30 14:15 jsCoder_洋洋 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com…

为什么[]==0;JavaScript里什么情况下a==!a为true呢?

原文链接 JavaScript里什么情况下a!a为true呢&#xff1f; 答案是当a []的时候&#xff0c;这是因为JavaScript的类型转换。 我们先来考虑这个问题&#xff0c;console.log([] false)会打印什么呢&#xff1f;答案是true。为什么呢&#xff1f;首先&#xff0c;因为当&quo…

正向代理与反向代理;

正向代理&#xff1a; A页面访问B页面&#xff0c;如果它们跨域&#xff1b;A还是想拿B的资源&#xff1b; 可以通过代理实现&#xff0c;A把信息发给服务器&#xff0c;这里的服务器就是代理&#xff1b;服务器访问B&#xff0c;再把信息返回给A&#xff1b; 这时B页面不知…

字节对齐测试实例

先看理论&#xff1a; 1. 更改C编译器的缺省字节对齐方式 在缺省情况下&#xff0c;C编译器为每一个变量或是数据单元按其自然对界条件分配空间。一般地&#xff0c;可以通过下面的方法来改变缺省的对界条件&#xff1a; 使用伪指令#pragma pack (n)&#xff0c;C编译器将按…