zoukankan      html  css  js  c++  java
  • css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

    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+支持)

  • 相关阅读:
    Struts2SpringHibernate整合示例,一个HelloWorld版的在线书店(项目源码+详尽注释+单元测试)
    Java实现蓝桥杯勇者斗恶龙
    Java实现 LeetCode 226 翻转二叉树
    Java实现 LeetCode 226 翻转二叉树
    Java实现 LeetCode 226 翻转二叉树
    Java实现 LeetCode 225 用队列实现栈
    Java实现 LeetCode 225 用队列实现栈
    Java实现 LeetCode 225 用队列实现栈
    Java实现 LeetCode 224 基本计算器
    Java实现 LeetCode 224 基本计算器
  • 原文地址:https://www.cnblogs.com/Trr-984688199/p/6189362.html
Copyright © 2011-2022 走看看