• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含rem,css3,vw,vh,rem等相关知识,佚名 希望在学习及工作中可以帮助到您

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的区别及浏览器支持情况,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对微课江湖网站的支持!

您可能想查找下面的文章:

  • css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
  • 轻松掌握CSS3中的字体大小单位rem的使用方法
  • 知识普及:彻底搞懂CSS中单位px和em,rem的区别
  • 浅析rem和em和px vh vw和% 移动端长度单位

相关文章

  • 2017-08-06div+css 定位浅析
  • 2017-08-06CSS实现让文字半透明显示在图片上的方法
  • 2017-08-06css 滤镜效果主要对HTML标记设置滤镜效果
  • 2017-08-06子Div使用Float后撑开父Div的几种方法
  • 2017-08-06css 等宽导航栏设计技巧
  • 2017-08-06浅析rem和em和px vh vw和% 移动端长度单位
  • 2017-08-06css IE8 兼容问题的汇总
  • 2017-08-06CSS层叠样式表之CSS解析机制的优先级及样式覆盖问题探讨
  • 2017-08-06css 清除浮动的新方法
  • 2017-08-065个DIV并排在一行的一种方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • table自动拉伸在chrome与IE中的兼容性问题解决
    • 控制span的width属性及display属性值的选择
    • 使用css sprites来优化你的网站在Retina屏幕下显示实现原理与代码
    • 实例教程 一款纯css3实现的数字统计游戏
    • 纯CSS实现酷黑风格三级下拉菜单效果代码
    • 利用边框border属性做的网页小符号
    • 那些不常用却很有的CSS小结
    • css 细线表格 css制作table细线表格常用属性
    • Div+CSS 布局入门教程之二 构建网站
    • 用css控制字符串的输出长度超出时隐藏

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有