几种常见的长度单位整理

几种常见的长度单位整理

VW

相对于视口的宽度。视口被均分为100单位的vw

屏幕宽375px,1vw=3.75px;

VH

相对于视口的高度。视口被均分为100单位的vh

屏高1200px,1vh=12px;

VMAX/VMIN

相对于视口的宽度或高度中较大/小的那个。其中最大/小的那个被均分为100单位的vmax/vmin

VW兼容性

唯一需要注意的是不支持Android 4.3(其它移动端可忽略)

最新安卓系统分布(2016.8)

Version Codeame API Distribution
2.2 Froyo 8 0.1%
2.3.3-2.3.7 Gingerbread 10 1.7%
4.0.3-4.0.4 Ice Cream Sandwich 15 1.6%
4.1.x Jelly Bean 16 6.0%
4.2.x Jelly Bean 17 8.3%
4.3 Jelly Bean 18 2.4%
4.3 KitKat 19 29.2%
5.0 Lollipop 21 14,1%
5.1 Lollipop 22 21.4%
6.0 Marshmallow 23 15.2%

考虑Android4.3,可两者混用

    .test{
        font-size:12px;
        font-size:3.2vw;//12*2/750*100vw,假设设计图为750px,设计图字体为24px
    }

@supports

    test{
        font-size:12px;
        @supports(font-size:1vw){
            font-size:3.2vw;
        }
    }

sass

test{
  font-size:12px;
  @supports(font-size:1vw){
      font-size:12*2/750*100vw;
  }
}

复用

@function pxToVw($px) {
    @return $px / 750 * 100vw;
}
test{
    font-size:12px;
    @supports(font-size:1vw){
        font-size: pxToVw(24);
    }
}

@supports:

supports的兼容性

不支持Android 4.3和ios8

ios系统分布,不包括ios10(2016.7)

IOS9 IOS8 Earlier
86% 11% 3%

ios8以下可以忽视

Rem

相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

默认1rem=16PX

html{
    font-size:18px;
}
//正常为1rem=18px;如屏幕宽度不大于300px,1rem=12px;
@media screen and (max-width: 300px){
    html{
        font-size:12px;
    }
}

或者

window.onresize = function(){
    document.getElementsByTagName('html')[0].style.fontSize
    = document.body.scrollWidth/20+'px';
}

CH

数字“0”的宽度

兼容问题

不支持安卓4.3

CH的兼容性

一个例子就懂了

0

EM

CSS3前就有,所有浏览器都支持,国外常见

相对长度单位。相对于当前对象内文本的字体尺寸。

如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

可以指定到小数点后三位,比如“1.234em”

  1. 相对的计算必然会一个参考物,那么这里相对所指的是相对于元素父元素的font-size。
  2. 比如说:如果在一个
    设置字体大小为“16px”,此时这个
    的后代元素教程了是将继承他的字体大小,除非重新在其后代元素中进行过显示的设置。此时,如果你将其子元素的字体大小设置为“0.75em”,那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”;
  3. 如果用户通过浏览器的UI控件改变了文字的大小,那么我们整个页面也会进行放大(或缩小)
    <body style='font-size:14px;'>
        <ul style='font-size:18px;'>
            <li style='font-size:22px;'>
                <p style='font-size:1em;'>1em[22px]p>
             li>
             <li style='font-size:2em'>
                <p style='font-size:1em;'>1em[36px]p>
             li>
             <li>
                 <p style='font-size:1em;'>1em[18px]p>
             li>
        ul>
    body>

THE END

你可能感兴趣的:(Web,css,VW,VH,REM,EM,响应式)