【CSS】相对长度单位绝对长度单位,vw/vh , rem等

最新推荐文章于 2024-03-28 11:00:37 发布

freedom_文

最新推荐文章于 2024-03-28 11:00:37 发布

阅读量3.2k

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/freedomVenly/article/details/104108822

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在这里插入图片描述

相对单位：

（一般用于对屏幕分辨率兼容较高的项目，可以使用不同设备的大小）

单位	描述
em	ems始终相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
ex	依赖于英文字母小 x 的高度
ch	数字 0 的宽度
rem	rem始终相对的是：根元素（html）的 font-size
vw	全称：viewpoint width，相对于浏览器窗口的宽度，1vw=视窗宽度的1%；比如浏览器窗口是 1920 * 970; 1vw=19.2
vh	全称：viewpoint height，相对于浏览器窗口的高度，1vh=视窗高度的1% 比如浏览器窗口是 1920 * 970; 1vh=9.7
vmin	vw和vh中较小的那个。
vmax	vw和vh中较大的那个。
%	相对于父元素的百分比

关于 rem ，有时候可以在页面顶部写个JS 来设定一个比较好计算的值，比如：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        //1rem  = 浏览器宽度的十分之一
        document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth/10+"px";
    </script>
    <style>
        *{margin: 0;padding: 0;}
        /*width:5rem = 浏览器宽度的50% */
        div{float: left;width:5rem;height: 1rem;}
    </style>
</head>
<body>

<div style="background: #50E33E"></div>
<div style="background: #437EBF"></div>

</body>
</html>

效果图：

在这里插入图片描述

绝对单位：

（一般用于对固定设备或软件的项目，不会受显示器，分辨率等的影响）

单位	描述
cm	厘米
mm	毫米
in	英寸 (1in = 96px = 2.54cm)
px *	像素 (1px = 1/96th of 1in) 、计算机屏幕上的一个点
pt	磅，point，大约1/72英寸； (1pt = 1/72in)
pc	pica，大约6pt，1/6英寸；12 点活字 (1 pc 等于 12 点)， (1pc = 12 pt)

浏览器支持：

长度单位	Chrome	IE	Firefox	Safari	Opera
em, ex, %, px, cm, mm, in, pt, pc	1.0	3.0	1.0	1.0	3.5
ch	27.0	9.0	1.0	7.0	20.0
rem	4.0	9.0	3.6	4.1	11.6
vh, vw	20.0	9.0	19.0	6.0	20.0
vmin	20.0	9.0*	19.0	6.0	20.0
vmax	26.0	不支持	19.0	不支持	20.0

freedom_文

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
【CSS】相对长度单位绝对长度单位,vw/vh , rem等

相对单位：（一般用于对屏幕分辨率兼容较高的项目，可以使用不同设备的大小）单位描述 em ems始终相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； ex 依赖于英文字母小 x 的高度 ch 数字 0 的宽度 ...
复制链接

扫一扫