前端基础CSS——CSS单位px、em、rem、vh、vw、vmin、vmax

最新推荐文章于 2024-04-27 21:35:02 发布

WXY19951125

最新推荐文章于 2024-04-27 21:35:02 发布

阅读量332

点赞数 1

分类专栏：前端基础CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/wxy19951125/article/details/85127873

版权

前端基础CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近学习文档的过程中，发现了一些陌生的面孔，来学习总结一下。

1、px：相对长度单位。像素单位，相对于显示器屏幕分辨率而言，是一个固定的大小。

2、em：相对长度单位。相对于父级元素的字体大小，如果父元素未设置字体大小，则相对于浏览器的默认字体尺寸。

3、rem：相对长度单位。相对于根元素<html>的字体大小。

vh、vw、vmin、vmax是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

4、vh：视窗高度的百分比（1vw 代表视窗的宽度为 1%）

5、vw：视窗宽度的百分比

6、vmin：当前 vw 和 vh 中较小的一个值

7、vmax：当前 vw 和 vh 中较大的一个值

TIPS：这种视窗百分比与%的区别在于：%是相对于父元素的比率，如果父元素没有设置高度是没法获取到百分比的高度。但是，视窗百分比是相对于窗口大小的，不存在这个问题，而且我们通常设置alert蒙层的时候是窗口的大小，直接设置100vw/100vh是很方便的。

<html>
    <body>
        <div class="div1">
            第一层<div class="div2">
                第二层<div class="div3">
                    第三层
                </div>
            </div>
        </div>
        <div class="box"></div>
    </body>
</html>

<style>
body,html{font-size: 14px;}
.div1{font-size: 1.5em;}   /*em是相对于父级body的fontSize,计算公式 1.5*14=21px*/
.div2{font-size: 2em;}     /*em是相对于父级div1的fontSize,计算公式 2*21=42px*/
.div3{font-size: 2rem;}    /*rem是相对于根节点html的fontSize,计算公式 2*14=28px*/

body{width: 100vw;height: 100vh;background: #ccc}   /*body宽高==可视窗口区域宽高*/
.box{width: 100vmin;height:100vmin}    /*屏幕375*667，100vmin==375px，100vmax==667px*/
</style>

WXY19951125

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础CSS——CSS单位px、em、rem、vh、vw、vmin、vmax

最近学习文档的过程中，发现了一些陌生的面孔，来学习总结一下。1、px：相对长度单位。像素单位，相对于显示器屏幕分辨率而言，是一个固定的大小。2、em：相对长度单位。相对于父级元素的字体大小，如果父元素未设置字体大小，则相对于浏览器的默认字体尺寸。3、rem：相对长度单位。相对于根元素&lt;html&gt;的字体大小。vh、vw、vmin、vmax是一种视窗单位，也是相对单位。它相...
复制链接

扫一扫