几种常见的长度单位整理

来源：互联网发布：android 读取蓝牙数据编辑：程序博客网时间：2024/05/16 23:55

几种常见的长度单位整理

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的兼容性

一个例子就懂了

EM

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

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

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

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

相对的计算必然会一个参考物，那么这里相对所指的是相对于元素父元素的font-size。
比如说：如果在一个<div>设置字体大小为“16px”，此时这个<div>的后代元素教程了是将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为“0.75em”，那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”；
如果用户通过浏览器的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

0 0