css vw vh ie9,css3中calc、vw、vh、vmin、vmax 属性的应用及兼容性详解
一、 calc()的使用
什么是calc()?
calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。
calc()能做什么?
calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。
calc()语法
calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:
.elm {
width: calc(expression);
}
其中"expression"是一个表达式,用来计算长度的表达式。
calc()的运算规则
calc()使用通用的数学运算规则,但是也提供更智能的功能:
使用“+”、“-”、“*” 和 “/”四则运算;
可以使用百分比、px、em、rem等单位;
可以混合使用各种单位进行计算;
表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
浏览器的兼容性
浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器对早期版本的兼容性不是太好。
大家在实际使用时,同样需要添加浏览器的前缀
.elm {
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();
}
二、vw 、vh、vmin 、vmax 的使用
1、vw 、vh、vmin、vmax的含义
1,vw、vh、vmin、vmax 的含义
1,vw、vh、vmin、vmax 的含义
(1)vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。
(2)具体描述如下:
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
vh:视窗高度的百分比
vmin:当前 vw 和 vh 中较小的一个值
vmax:当前 vw 和 vh 中较大的一个值
2、vw、vh与%百分比的区别
(1)% 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。
(2)vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。
3、vmin、vmax用处
做移动页面开发时,如果使用 vw、wh 设置字体大小(比如 5vw),在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。
4、浏览器兼容性
(1)桌面 PC
Chrome:自 26 版起就完美支持(2013年2月)
Firefox:自 19 版起就完美支持(2013年1月)
Safari:自 6.1 版起就完美支持(2013年10月)
Opera:自 15 版起就完美支持(2013年7月)
IE:自 IE10 起(包括 Edge)到现在还只是部分支持(不支持 vmax,同时 vm 代替 vmin)
(2)移动设备
Android:自 4.4 版起就完美支持(2013年12月)
iOS:自 iOS8 版起就完美支持(2014年9月)
参考:https://blog.csdn.net/romantic_love/article/details/80868909
css vw vh ie9,css3中calc、vw、vh、vmin、vmax 属性的应用及兼容性详解相关推荐
- [css] 举例说明在css3中怎么实现背景裁剪?
[css] 举例说明在css3中怎么实现背景裁剪? background-clip: border-box(默认,背景延伸至边框外沿,但是在边框的下层) padding-box(背景延伸至paddin ...
- 从零开始前端学习[32]:css3中新增加的一些文本属性
css3中新增加的一些文本属性 css中相关的文本属性 css3中增加的一些文本属性 direction文本显示方向 多行超出文本显示省略号 text-shadow字体的阴影设置 text-strok ...
- nmmqq.php?/lspc.html,html中的图片直接使用base64编码后的字符串代替详解
网页中的图片是使用base64编码后的字符串代替了,这个叫做Data URI scheme,下面有个不错的示例,大家可以参考下 最近来了一个网页,里面有图片,但是却没有引用外部的图片资源,很好奇.查看 ...
- 多目标跟踪(MOT)中的卡尔曼滤波(Kalman filter)和匈牙利(Hungarian)算法详解
多目标跟踪(MOT)中的卡尔曼滤波(Kalman filter)和匈牙利(Hungarian)算法详解 1. 概览 在开始具体讨论卡尔曼滤波和匈牙利算法之前,首先我们来看一下基于检测的目标跟踪算法的大 ...
- CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解 大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
- php self this static,PHP 中 self、static、$this 的区别和后期静态绑定详解
本篇文章给大家分享的内容是关于PHP 中 self.static.$this 的区别和后期静态绑定详解,有着一定的参考价值,有需要的朋友可以参考一下 self.static 和 $this 的区别 为 ...
- java构造块_java中的静态代码块、构造代码块、构造方法详解
运行下面这段代码,观察其结果: package com.test; public class HelloB extends HelloA { public HelloB() { } { System. ...
- (转)web.xml 中的listener、 filter、servlet 加载顺序及其详解
转: https://www.cnblogs.com/Jeely/p/10762152.html web.xml 中的listener. filter.servlet 加载顺序及其详解 一.概述 1. ...
- Java中常见RuntimeException与其他异常表及Exception逻辑关系详解
Java中常见RuntimeException与其他异常表及Exception逻辑关系详解 前言 常见`RuntimeException` 其他错误类型 `Error`类 `Exception`类 E ...
- python使用视频_Python中操作各种多媒体,视频、音频到图片的代码详解
我们经常会遇到一些对于多媒体文件修改的操作,像是对视频文件的操作:视频剪辑.字幕编辑.分离音频.视频音频混流等.又比如对音频文件的操作:音频剪辑,音频格式转换.再比如我们最常用的图片文件,格式转换.各 ...
最新文章
- 用python画时序图源代码_使用python实现画AR模型时序图
- 程序员因中年危机从北京回老家事业单位:工资从60万爆降到6万
- CircleProgressView
- enterText与typeText
- windows下进程间通信的(13种方法)
- C语言函数怎么像python那样返回多个值?(三种方法:1、设置全局变量 2、传递指针 3、使用结构体返回不同类型的数据)
- 谷歌对用户搜索加密这一做法对seo的影响!
- 轻松监控Docker容器中的ADF应用程序
- 2011年:签到已死?
- vue 监听渲染变化
- python rabitmq_python使用rabbitmq实例二,工作队列
- java怎样调用图像做按钮_swing-Java:使用图像作为按钮
- lync显示无法找到服务器,Lync 2013 已知问题
- DBUtils详细介绍+实例
- 盘点国内哪家网络云盘比较好用?
- restful api 与 GraphQL 分析比较
- 安卓在活动左上角添加返回键
- 计算机c盘是内存还是外存,rom是内存还是外存?
- APS计划排产软件助家纺企业进行成本控制
- springnative让java应用脱离jvm
热门文章
- [LeetCode] Maxium Subarray
- 计算机专业考信息安全研究生,我是计算机科学与技术专业的学生,想考信息安全的研究生,我们本专业涉及的知识主要是计算机的组成原理,...
- STM32 CubeIDE快速创建工程(图文详解)
- 校园导航系统 数据结构
- linux查看服务器时间,Linux 查看当前时间
- 传教士 野人 过河问题
- 招投标工作中投标书编制的流程是怎样的?
- 正则表达式限制只能输入中文英文数字
- 对话罗永浩:手机行业唯一的聪明人死了,我胜算很大
- IAR9.30以上版本安装、注册、新建工程和配置过程详细介绍