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 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
CSS3实现三角形不断放大效果
Apr 13 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 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中防止SQL注入的最佳解决方法
2013/04/25 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
教你怎样写好自我评价
2013/10/05 职场文书
酒吧员工的岗位职责
2013/11/26 职场文书
竞选村长演讲稿
2014/04/28 职场文书
白血病捐款倡议书
2014/05/14 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2014年化验员工作总结
2014/11/18 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
Java基础-封装和继承
2021/07/02 Java/Android
详解在OpenCV中如何使用图像像素
2022/03/03 Python
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js