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实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
使用CSS设置滚动条样式
Jan 18 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
从wamp到xampp的升级之路
2015/04/08 PHP
php截取视频指定帧为图片
2016/05/16 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
python解析中国天气网的天气数据
2014/03/21 Python
Python中的yield浅析
2014/06/16 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
python爬虫要用到的库总结
2020/07/28 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
采购内勤岗位职责
2013/12/10 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
企业趣味活动方案
2014/08/21 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript