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教程:边框属性border的极致应用
Apr 02 HTML / CSS
CSS3制作日历实现代码
Jan 21 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 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初始化对象和析构函数的简单实例
2014/03/11 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
php实现微信支付之退款功能
2018/05/30 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
Python日志syslog使用原理详解
2020/02/18 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
Python 日期与时间转换的方法
2020/08/01 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
优秀员工评优方案
2014/06/13 职场文书
班级出游活动计划书
2014/08/15 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
个人授权委托书样本
2014/09/13 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2015年采购部工作总结
2015/04/23 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android