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 相关文章推荐
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
在CSS中使用when/else的方法
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
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
Firefox div高度自适应
2009/04/28 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
python绘制立方体的方法
2018/07/02 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
机械专业应届生求职信
2013/09/21 职场文书
《三峡》教学反思
2014/03/01 职场文书
五一手机促销方案
2014/03/08 职场文书
捐助倡议书范文
2014/04/15 职场文书
招标授权委托书样本
2014/09/23 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers