CSS单位：em、rem、%、vh、vw、vmin、vmax

浏览器默认的字号是16px

改变该设定：

html {font-size: 62.5%;
}
//此时的浏览器默认字号为10px

相当于：

px	rem
10px	1rem 1em
12px	1.2rem 1.2em
14px	1.4rem 1.4em
16px	1.6rem 1.6em

1. em：相对于父元素长度单位，1em=元素中文本的1个垂直高度

如果元素自身设置了font-size，那么参考文本大小就是自身的font-size大小
如果元素自身没有设置font-size，那么参考文本大小就是父元素的font-size大小
为元素设置font-size时，如果使用em作为单位，那么参考文本大小是父元素的font-size大小
子元素中除了font-size的em是根据父元素的font-size确定的，其他所有em都是根据自身的font-size确定的

(最后一点举例：)

<style>body {font-size: 12px;}div {font-size: 2em; /* 2em = 12px * 2 = 24px */width: 10em;    /* 10em = 24px * 10 = 240px */}
</style>
<body><div></div>
</body>

2. rem：相对于根元素长度单位

3.vh and vw： 相对于视窗（浏览器实际显示内容的区域，即网页浏览器不包括工具栏和按钮的部分）的高度和宽度，1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度

比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px

4.vmin and vmax：关于视口高度和宽度两者的最小值或者最大值（vmin：取当前vw和vh中较小的那一个值，vmax：取当前vw和vh中较大的那一个值）

5、%：百分比，相对长度单位，相对于父元素的百分比值，使用时必须从根容器就设置好百分比

div{height：100%；
}
//该百分比要有效，父级标签的高度必须要设定（父元素的高度没有设置，则height只是一个默认值：height: auto; 当浏览器根据这样一个默认值来计算百分比高度时，只能得到undefined的结果），如果高度要等于浏览器的高度，必须同时设置html，body{ height：100%;}然后目标标签div每一个父级标签的高度都必须是100%

关于CSS中所有可以使用 % 作为属性值的样式属性，他们的基数取决于什么：

https://blog.csdn.net/weixin_45092437/article/details/123167480

CSS单位：em、rem、%、vh、vw、vmin、vmax相关推荐

px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
html pc vw过大,细说em/rem/vh/vw与响应式布局
细说em/rem/vh/vw与响应式布局一.em,rem的原理与应用场景 CSS单位中的长度单位分为:相对长度.绝对长度,如下表: 引用MDN上的两句话: em:在 font-size 中使用是相对 ...
认识css长度单位 px % em rem vh vw
目录长度单位 px % em rem vh.vw 总结长度单位在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
html 自适应单位vw,CSS单位em、rem、vh和vw等及CSS3的calc()以及line-height百分比
css单位我们常用的是px,也即是像素.随着网页开发自适应的要求,css3新增了许多单位,rem.vw和vh.vmin和vmax.ch和ex等. em 做前端的应该对em不陌生,不是什么罕见的单位,是 ...
前端css单位小结：vh、vw、百分比、rem、px、计算属性calc
写在前面: 本文作为本人学习总结之用,同时分享给大家~ 个人前端博客网站:zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步! 前端c ...
7、em/px/rem/vh/vw区别？
简介 em/px/rem/vh/vw都属于css的单位,这些单位可以分为相对单位,绝对单位 px:绝对单位,网页按照精确像素来显示 em:相对单位,相对自身定义的font-size来计算,自身没有设置 ...
css px em rem % vw vh vm 区别
前言在传统项目开发中,我们只会用到 px.%.em 这几个单位长度,它们可以适用大部分项目的开发,并且拥有较好的兼容性. 而从 css3 开始,浏览器对逻辑单位的支持又提升了新的境界,增加了 rem ...
说说em/px/rem/vh/vw的区别
一.介绍传统的项目开发中,我们只会用到px.%.em这几个单位,它可以适用于大部分的项目开发,且拥有比较良好的兼容性从CSS3开始,浏览器对计量单位的支持又提升到了另外一个境界,新增了rem.vh ...
CSS查缺补漏之《常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)》
此文内容较少,轻轻松松掌握,莫要有压力~ 正如现实生活中长度具有mm.dm.cm.m等,在css中,也具备多种长度单位,本文对常用的几种单位进行详细举例介绍~ px:像素单位初学css时,px单位经 ...

CSS单位：em、rem、%、vh、vw、vmin、vmax

CSS单位：em、rem、%、vh、vw、vmin、vmax相关推荐

最新文章

热门文章