css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况


Posted in HTML / CSS onDecember 06, 2016

px:绝对单位,页面按精确像素展示

em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。

(另外需注意chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准,所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。

rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取)

页面基准320px(20px),html font-size值的计算:

var ele=document.getElementsByTagName("html")[0],    
     size=document.body.clientWidth/320*20;    
ele.style.fontSize=size+"px"

  注:需设置meta缩放比1:1

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。

vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。

vmin:vw和vh中较小的那个。

vmax:vw和vh中较大的那个。

vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,iOS safari 8+支持,Androidbrowser4.4+支持,chrome for android39支持

其它的单位还有:

%:百分比

in:寸

cm:厘米

mm:毫米

pt:point,大约1/72寸

pc:pica,大约6pt,1/6寸

ex:取当前作用效果的字体的x的高度,在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持,firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)

ch:以节点所使用字体中的“0”字符为基准,找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,iOS safari 7.1+,Android browser4.4+支持)

以上所述是小编给大家介绍的css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3属性background-size使用指南
Dec 09 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 #HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 #HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 #HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 #HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 #HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 #HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 #HTML / CSS
You might like
社区(php&amp;&amp;mysql)一
2006/10/09 PHP
php动态生成JavaScript代码
2009/03/09 PHP
PHP form 表单传参明细研究
2009/07/17 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
任意位置显示html菜单
2007/02/01 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
使用Python编写vim插件的简单示例
2015/04/17 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
python正则表达式面试题解答
2020/04/28 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
Python何时应该使用Lambda函数
2019/07/02 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
Python Http请求json解析库用法解析
2020/11/28 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
《陶罐和铁罐》教学反思
2014/02/19 职场文书
百日安全生产活动总结
2014/07/05 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
2015年科室工作总结
2015/04/10 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
Java 多态分析
2022/04/26 Java/Android
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS