几种常见的长度单位整理

最新推荐文章于 2023-04-25 20:22:25 发布

月迷津渡丶

最新推荐文章于 2023-04-25 20:22:25 发布

阅读量2.9k

点赞数

分类专栏： Web css 文章标签： VW VH REM EM 响应式

本文链接：https://blog.csdn.net/oYueMiJinDu/article/details/52152885

版权

Web 同时被 2 个专栏收录

145 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

几种常见的长度单位整理

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

收藏

觉得还不错? 一键收藏
0
评论
几种常见的长度单位整理

几种常见的长度单位整理VW 相对于视口的宽度。视口被均分为100单位的vw 屏幕宽375px,1vw=3.75px;VH 相对于视口的高度。视口被均分为100单位的vh 屏高1200px,1vh=12px;VMAX/VMIN 相对于视口的宽度或高度中较大/小的那个。其中最大/小的那个被均分为100单位的vmax/vmin 唯一需要注意的是不支持Android 4
复制链接

扫一扫