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天学会在今日头条月入过万

    要在头条上实现日入百金,你可以考虑以下几个方面: 1. 选择热门话题:关注当前热门话题,了解用户的兴趣和需求,选择与之相关的内容进行创作。这样可以吸引更多的读者和流量。 2. 提供…

    互联网 2023年 8月 2日
  • 快速脱单微信头像,撩妹10天教你一招脱单

    最近有很多粉丝在质疑我们的视频说我们的搭讪是请的演员,这期就把我们搭讪失败的视频做一个合集,让大家看看光鲜的背后其实也有诸多的无奈与尴尬。搭讪是一件非常需要勇气的事情,被拒绝更是家…

    2023年 7月 3日
  • 适合发快手的感情句子长句子,适合发快手的句子爱情对话霸气

    有一天你会明白,你需要的不是轰轰烈烈的爱情,只是想要一个不会离开你的人,冷的时候他会给你一件外套,胃疼时他会给你一杯热水,难过时他会给你一个拥抱,就这样,你也觉得幸福。 酒,喝的半…

    2023年 8月 13日
  • 熊猫tv倒闭后的主播都去哪了(熊猫tv倒闭后的主播都在哪里)

    2015年王思聪旗下的熊猫TV横空出世,加入到当时的直播平台混战中,由于王思聪的“明星”效应等因素,使得刚出道的熊猫TV就和当时的两大直播巨头“某鱼”和“某牙”形成三足鼎立之势。2…

    互联网 2023年 10月 12日
  • 个人信用报告查的是什么,个人信用报告建议查吗

    一纸个人信用报告背后,关系着每个人的金融生活,特别是贷款、信用卡消费等。而哪些信息会被采集? 它们又将如何影响一个人的房贷、车贷、信用卡消费等? 近日,中国人民银行最新披露了关于个…

    2023年 1月 26日
  • 网络营销专业学什么课程

    随着互联网的兴起,越来越多的互联网用户,也让更多的企业开始选择通过网络营销的方式获得用户,市场的人才需求也是比较大。既然网络营销既有市场又有人群,也让我们好多小伙伴对网络营销感兴趣…

    2023年 4月 16日
  • 点亮超级qq纪念版图标的条件(qq腾讯公益图标怎么点亮)

    今天教你们怎么百分之百点亮超级QQ纪念版 许多好朋友是不是都没有资格,无法点亮,超级QQ也不能开通了,这个也算是绝版了 没关系,今天我就教你怎么来点亮他 没有废话了,开始教程 先到…

    2023年 5月 9日
  • nas 影视播放器(最适合影视发烧友的nas)

    作为一个跟着大佬屁股后面走的小白,这次会简单分享一下自己十年的观影路,然后就带大家过一遍私人影视库的创建和维护,硬件的选择等,我只是一个用空余时间学习的小白,站内还有非常多的大佬,…

    2023年 2月 27日
  • ps修改图像大小尺寸最好的方法

    修改图像尺寸#Ps干货# 哈喽大家好~小子又来啦,今天给大家更新一个如何利用图像大小命令来修改图像尺寸的教程,这篇可是实用干货哦,拿去吧你! 1、首先我们先打开背景素材文件: 2、…

    2023年 8月 22日
  • adobe premiere pro支持PPT格式导入吗

    1、关于将媒体导入Premiere Pro 您可以通过多种方式将媒体导入Premiere Pro。您选择的方式将取决于您要导入的媒体类型。 在本节中,我们将讨论为您提供的各种工具,…

    2023年 3月 13日