css rem单位(css中px指的什么)

前端开发中长度单位有很多,最为常用和熟知的肯定就是px了,随着前端的不断发展,em和rem也越来越普及,只用px一把梭的时代早已成为过去。是px过时了吗?如果对这些单位的使用场景不够了解,可能就会拿着一个rem从头梭到尾了。本篇我们来好好梳理一下css中的长度单位以及它们的使用场景,我们要在合适的场景使用合适的单位。

px

px是像素点单位,与之线性相关的单位有mm(毫米)、cm(厘米)、in(英寸)、pt(点,印刷术语,1/72英寸)、pc(派卡,印刷术语,12点)。

1in = 25.4mm = 2.54cm = 6pc = 72pt = 96px

em

em是相对长度单位,适合基于特定的字号进行排版。1em=当前元素的字号,其准确值取决于作用的元素。

.padded { font-size: 16px; padding: 1rem;}

上面的代码设置了元素的内边距为16px。最终浏览器会根据相对单位计算出绝对值。

使用em来设置padding、height、width、border-radius很合适,当前元素如果继承了不同的字号,响应的内边距、宽高也会自动随之缩放。

需要注意的是,如果使用em定义元素的字号,em的表现会稍有不同。上面提到,当前元素的字号决定了1em的值,但是,如果声明font-size:1.2em,该元素的字号肯定不能等于自己的1.2倍。实际上,此时font-size是根据当前元素继承的字号来计算的。

CSS解析——px、em、rem单位

em示例

上图可以看到,p标签中的字号是1.2*16=19.2px,font-size是根据继承的字号计算的。

em需要注意的就在于此,同时用它指定一个元素的字号和其他属性时,浏览器必须先计算字号,然后使用这个计算值算出其余的属性值。

另外,当用em来指定多重嵌套的元素的字号时,就会产生意外的结果,内嵌的元素会一直继承上级的字号,导致要么嵌套字号越来越大,要么越来越小。

rem

rem和em很像,其实和em的理念很像,都是相对单位,rem中的r是root,顾名思义,rem是相对一个root元素(一般以html标签作为根元素)计算值的,不管在文档的什么位置。

rem结合了px和em的优先,既保留了相对单位的优势,又简单易用可控。那只用rem行吗?行,也不行。如果你只了解习惯这一个单位,就要充分发挥rem的优势,全站梭到底也没什么不行的。但是如果你想写出简单好看的css代码,在不同的场景下使用适当的单位会让你和你的队友少趟许多的坑。

一般情况下,我会使用rem设置字号,用px设置边框、用em来设置其他大部分的属性,尤其是内边距、外边距、圆角等。这样字号是可预测的,同时还能在其他因素改变元素字号时,借助em缩放内外边距。你觉得呢?

vh、vw、vmin、vmax

我们先介绍一下概念:

视口:浏览器窗口里网页可见部分的边框区域,不包括浏览器的地址栏、工具栏、状态栏。

vh:视口高度的1/100

vw:视口宽度的1/100

vmin:视口宽、高中较小的一方的1/100

vmax:视口宽、高中较大的一方的1/100

从定义上,相信小伙伴们已经明白了视口单位的用法。我来介绍相对视口单位的一个比较特别的用途:设置字号。诶?之前不是说设置字号用rem吗?用视口单位能有什么特别的呢?

用rem设置字号的时候,为了适配不同的屏幕大小,免不了要使用@media根据不同的屏幕设置根元素的字号大小,有一个小小的问题是,如果动态去调整浏览器的宽度,达到设置的断点时,一定程度会导致页面的字体突然变大或缩小。但是,如果是使用vw来设置字号呢?页面的字号是不是就不会突然的变化?会很平滑?

当然了,这种用法在实际应用中推广的程度不是特别高,有些是因为浏览器支持的问题,有些是因为没必要因为这么一点点的优化,而放弃心爱的rem。

总结

今天所写的内容主要是帮大家回顾一下css单位的用途及场景,还有一些单位(如fr)还没有提及,将会在后面的文章中结合别的属性写。各种单位的存在一定都有各自的特长和适合的场景,偶尔打开一下思路,也许能有更好的解决方案。大家有想和我分享的内容吗?感谢评论关注哦!

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com

(0)
上一篇 2023年 7月 5日 下午1:44
下一篇 2023年 7月 5日 下午1:54

相关推荐

  • 电脑文件夹怎么设置密码?3个方法为文件加密

    我的电脑里存了很多重要的文件夹,为了防止信息的泄露,我想把这些文件夹都设置密码。但是不知道具体应该如何操作。请求大家的帮助! 我们平常在使用电脑时,可能会将很多重要的文件保存在电脑…

    2023年 7月 23日
  • 武侠小说作者排名榜排行榜,作家余华芳武侠小说的作品是什么

    各位书友们,大家好!我是看书的蝈蝈vs螳螂,今天给大家推荐3本武侠小说,如果你也喜欢这类型的小说,还请多多点赞留言呀,每本都是高分 第一本:《武侠:开局奖励满级神功》 简介:  苏…

    2023年 4月 28日
  • 支付宝领红包攻略,每天都可以领,最高99元是真的吗

    打开支付宝,扫一扫,一定有红包到手,不信你试试 一年一度的支付宝领红包大战开始了,每天都可以领,红包金额从0.01元到99元不等,看你的运气了。 那怎么样才能更好的领到红包,或者红…

    2023年 7月 8日
  • 2021网文小说推荐(2018排名前十网文小说)

    2023年,14本网文小说热度排名榜单出炉啦! 1、《万相之王》天蚕土豆 简介:   天地间有万相,我李洛,终将成为那万相之王。 2、《剑来》烽火戏诸侯 简介:   大千世界,无奇…

    2023年 4月 6日
  • 百度网盘总是失败怎么办

    大家都知道我们平时一些不常用,但是又需要保存的文件或者视频等一些资源,因为怕遗失所以都会放在百度网盘里,但是很多朋友就发现了问题,存进去再想下载的时候速度非常慢甚至失败,那么百度网…

    2023年 2月 13日
  • 如何用photoshop制作一寸照片

    今天我们讲解如何利用裁剪工具来制作一寸照片的效果。在Photoshop中裁剪工具除了可以裁剪照片还可以修正倾斜的图片。 首先打开要裁剪的图片,在工具箱中选择裁剪工具,在选项栏中将参…

    2023年 3月 14日
  • qq那个微视怎么取消

    [闽南网] 更新后的手机qq,总是会有各种的消息和新闻推送,不少人都想要全部关掉。手机QQ怎么彻底取消微视弹窗?下文教大家方法。 手机QQ如何彻底取消微视弹窗 手机QQ自从更新了之…

    2023年 4月 11日
  • 路由器怎么用,路由器怎么用的

    路由器是一种网络设备,总的来说,它的作用就是提供数据的转发和交换功能,能够把一些不同的网络连接起来,形成一个大型的网络。它是通过无线或者有线连接到计算机或者其他设备,来使得这些设备…

    2023年 5月 24日
  • 申通圆通中通韵达极兔发货单号,申通圆通极兔哪个快递更快

    快递行业的快速发展造成用户对快递的时效和问题件掌握不准确,电商客服和快递网点客服对快递单号轨迹查询不及时,引起用户大量投诉,小件侠快递批量查询助手(***)一次可导入万条快递单号 …

    互联网 2023年 6月 11日
  • 亲爱的热爱的免费观看完整版电视剧百度云

    7月22日,杨紫在社交平台发文称:“收到各种来自身边人的消息,知道了这部戏网上已经被曝光全集的事情,一部剧来自于所有演员、团队和工作人员们的努力,不希望通过这种方式展现给大家!希望…

    互联网 2023年 5月 27日