深究–CSS中px、rem与em的区别

深究–CSS中px、rem与em的区别前言:随着PC端的网页盛行,移动端作为重要的一部分,也是火热的发展,但是鉴于一些单位的使用,我们并不知道该怎样去使用,那么今天我们来看看常用的三种单位PX、rem与em。目录:一.PX1.概念:2.特点:二.rem一.PX1.概念:px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX:px是pixel的缩写,是像素单位也是为影像显示的基本单位,译自英文“pixel”,pix是英语单词picture的常用简写,加上英语单词“元素”element,就得到pixel,

大家好,又见面了,我是你们的朋友全栈君。

前言:随着PC端的网页盛行,移动端作为重要的一部分,也是火热的发展,但是鉴于一些单位的使用,我们并不知道该怎样去使用,那么今天我们来看看常用的三种单位PXremem


一.PX


1.概念:


px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX:px是pixel的缩写,是像素单位也是为影像显示的基本单位,译自英文“pixel”,pix是英语单词picture的常用简写,加上英语单词“元素”element,就得到pixel,故“像素”表示“画像元素”之意,有时亦被称为pel(picture element)。

像素:像素是指在由一个数字序列表示的图像中的一个最小单位,称为像素。像素是分辨率的单位,分辨率越高,那么显示效果就越精细和细腻。相机所说的像素,其实是最大像素的意思,这个像素值仅仅是相机所支持的有效最大分辨率。

.box{ 
   
	width:200px;
	height:200px;
}

2.特点:


  1. IE无法调整那些使用px作为单位的字体大小;
  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
  3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

二.em


emrem 都是灵活可扩展的单位,由浏览器转换为像素值,取决于设计中的字体大小,如果使用值 1em1rem ,它可以被浏览器转换为从 16px160px 或其他任意值。浏览器使用 1px ,那么 1px 始终显示为完全 1px


1.概念:


em:em是相对长度单位。其相对于当前对象内文本的font-size,如果当前文本的字体尺寸没有设置,则相对于浏览器的默认字体尺寸。

2.特点:


  1. em的值并不是固定的;
  2. em会继承父级元素的字体大小。

3.注意:


注意:任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

所以我们在写CSS的时候,需要注意几点:

  1. body选择器中声明Font-size=62.5%;
  2. 将你的原来的px数值除以10,然后换上em作为单位;
  3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

4.为什么使用em:


em 单位取决于一个font-size值而非 html 元素的字体大小。

为此,em 单位的主要目的应该是允许保持在一个特定的设计元素范围内的可扩展性

例如,您可能使用em 值设置导航菜单项的padding、 margin,line-height等值。带有0.9rem 字体大小的菜单

通过这种方式,如果您更改菜单的字体大小菜单项周围的间距将在剩余的空间按比例缩放。

   body { 
   
            font-size: 62.5%;
        }
        
   .box { 
   
       font-size: 1.4em;
   }

5.重点理解:


有一个比较普遍的误解,认为 em 单位是相对于父元素的字体大小。 事实上,根据W3标准 ,它们是相对于使用em单位的元素的字体大小。父元素的字体大小可以影响 em 值,但这种情况的发生,纯粹是因为继承。

三.rem


1.概念:


rem:是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区

别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个

单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大

小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对

于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字

体大小。

 html { 
   
        font-size: 42.66px !important;
    }
  .box{ 
   
  	 font-size: .25rem;  ||    font-size: 20px;
  }

2.特点:


html 元素将继承浏览器中设置的字体大小,除非显式设置固定值去覆盖。所以 html 元素的字体大小虽然是

直接确定 rem 值,但字体大小可能首先来自浏览器设置。因此浏览器的字体大小设置可以影响每个使用 rem

单元以及每个通过 em 单位继承的值。

3.为什么使用rem:


Rem 单位提供最伟大的力量并不仅仅是他们提供一致尺寸而不是继承。 相反,它给我们的一个途经去获取用

户的偏好来影响网站中每一处使用rem的元素大小,不再是使用固定的 px 单位。为此,使用 rem 单位的主要

目的应该是确保无论用户如何设置自己的浏览器,我们的布局都能调整到合适大小。

四.总结


1.rem与em:


rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响,除非显式重写一个具体单位。

em 单位转为像素值,取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小,除非显式重写与一个具体单位。

2.px与rem:


对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。

对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

3.综述:


  1. remem 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
  2. em 单位基于使用他们的元素的字体大小。
  3. rem 单位基于 html 元素的字体大小。
  4. em 单位可能受任何继承的父元素字体大小影响
  5. rem 单位可以从浏览器字体设置中继承字体大小。
  6. 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
  7. 在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem
  8. 使用rem单位,除非你确定你需要 em 单位,包括对字体大小。
  9. 媒体查询中使用 rem 单位
  10. 不要在多列布局中使用 emrem 改用 %
  11. 不要使用 emrem,如果缩放会不可避免地导致要打破布局元素。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150291.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java 旅游管理系统

    java 旅游管理系统旅游系统设计分为前后网站和后台管理系统,功能点包含旅游景点信息分类展示、景点详情(地理位置、特色景点概述等)、下单预订、记录分享等功能。需搭建ftp服务:https://blog.csdn.net/weixin_44989660/article/details/111280276一:前端子系统功能需求分析1.游客注册登录功能模块:游客预定景点等操作需要先将账号密码进行注册,根据注册的账号密码登录到前端子系统中对功能模块进行操作。2.预定景点功能模块:游客遇到自己喜欢的景点信息后,可以通过点击预定景点按

  • Postman 使用教程

    Postman 使用教程关注「开源Linux」,选择“设为星标”回复「学习」,有我为您特别筛选的学习资料~postman是一款支持http协议的接口调试与测试工具,其主要特点就是功能强大,使用简单且易…

  • 事务ACID理解

    事务ACID理解事务管理(ACID)谈到事务一般都是以下四点原子性(Atomicity)原子性是指事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不发生。一致性(Consistency)事务前后数据的完整性必须保持一致。隔离性(Isolation)事务的隔离性是多个用户并发访问数据库时,数据库为每一个用户开启的事务,不能被其他事务的操作数据所干扰,多个并发事务之间要相互隔…

    2022年10月12日
  • Java和Python有什么区别,初学者学Java还是Python?「建议收藏」

    Java和Python有什么区别,初学者学Java还是Python?「建议收藏」这里是我的一些总结,有些是参考别人的(在这里谢谢!!!)区别:1.Python比Java简单,学习成本低,开发效率高2.Java运行效率高于Python,尤其是纯Python开发的程序,效率极低3.Java相关资料多,尤其是中文资料4.Java版本比较稳定,Python2和3不兼容导致大量类库失效5.Java开发偏向于软件工程,团队协同,Python更适合小型开发6.Java偏向于商业开发,Python适合于数据分析7.Java是一种静态类型语言,Python是一种动态类型语言8.Ja

  • 计算机桌面图片怎么设置大小,怎么设置桌面壁纸大小[通俗易懂]

    计算机桌面图片怎么设置大小,怎么设置桌面壁纸大小[通俗易懂]很多人都知道怎麽设置电脑桌面,可真正找到适合自己屏幕的可能很少,图片或大或小,小编为大家分享了设置桌面壁纸大小的方法,下面大家跟着小编一起来了解一下吧。设置桌面壁纸大小方法先查看自己电脑屏幕分辨率,方法:依次打开控制面板\外观和个性化\显示\屏幕分辨率。查看图片的大小:单击图片,将鼠标放在图片图标上,就能看到尺寸。双击图片,用windows照片查看器打开,点击”打开“,选择画图。假设屏幕分辨率:…

  • 软件测试理论思维导图[通俗易懂]

    一个合格的测试人员软件测试理论这一方面必须要完全掌握无论做什么测试都离不开测试理论这里面的原则啊方法等等下面是笔者在学习完测试理论所记录下的思维导图希望能帮到一些想进入测试这行业的人。…

发表回复

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

关注全栈程序员社区公众号