您的位置 首页 css教程

css的rem是什么?

rem是什么?

它的全称是 font size of the root element (根元素的字体大小),

它是CSS3中新增加的一个尺寸(度量)单位,根节点(html)的font-size决定了rem的尺寸,也就是说它是一个相对单位,相对于(html)。

rem是一种相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。

浏览器的默认字体?

浏览器的默认的font-size是16px,1rem默认就等于16px。(chrome最小字体为12px)

rem可以做什么及它的应用场景?

用来做web app的屏幕适配,因为不同手机型号的屏幕大小都不同,所以这时候我们就不能用px来做单位,rem是适配不同手机屏幕的一种方案。

设置的font-size来改变rem尺寸

 :root{      font-size:20px;     }.box{      width:1rem;      height:1rem;      background-color:purple;    }

将根元素html的font-size设置为20px,此时box的宽高都为20px,也就是1rem = 20px

示例:

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CSS长度单位rem-CSS大小rem详解</title><style>html,h1{font-size:12px;}p{font-size:2rem;}</style></head><body><h1>下面的文字将是html定义的字体大小的2倍:</h1><p>我是html定义的12px的2倍,字体大小为24px</p></body></html>

效果图:

1.jpg

更多web前端知识,请查阅 HTML中文网 !!

以上就是css的rem是什么?的详细内容,更多请关注火云技术网其它相关文章!

文章来源:火云技术网

文章标题:css的rem是什么?

文章地址:https://www.pyhw.net/5322_css%e7%9a%84rem%e6%98%af%e4%bb%80%e4%b9%88%ef%bc%9f.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图