深究–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)


相关推荐

  • web前端网页设计制作_网页制作教程

    web前端网页设计制作_网页制作教程简易旅游网,静态网页制作页面效果

  • PS磨皮滤镜Portraiture2.3简体中文绿色版32b/64b

    PS磨皮滤镜Portraiture2.3简体中文绿色版32b/64b磨皮滤镜Portraiture简单介绍  Portraiture是一款Photoshop的插件,用于人像图片润色,减少了人工选择图像区域的重复劳动。它能智能地对图像中的皮肤材质、头发、眉毛、睫毛等部位进行平滑和减少疵点处理!      Portraiture是极负盛名的专业人像磨皮滤镜,堪称磨皮神镜,仰望土豪器材党的屌丝团必备。算法优秀,不会造成处理后

  • jenkins自动触发构建_jenkins调用bat脚本

    jenkins自动触发构建_jenkins调用bat脚本前言跑自动化用例每次用手工点击jenkins出发自动化用例太麻烦了,我们希望能每天固定时间跑,这样就不用管了,坐等收测试报告结果就行。jenkins的定时任务是用的crontab语法定时构建语法

  • Java安全之Commons Collections3分析

    Java安全之CommonsCollections3分析文章首发:Java安全之CommonsCollections3分析0x00前言在学习完成前面的CC1链和CC2链后,其实再来看CC3

    2021年12月12日
  • 关于数据库读写分离

    1、what读写分离读写分离,基本的原理是让主数据库处理事务性增、改、删操作(INSERT、UPDATE、DELETE),而从数据库处理SELECT查询操作。数据库复制被用来把事务性操作导致的变更同步到集群中的从数据库。2、why那么为什么要读写分离呢?因为数据库的“写”(写10000条数据到oracle可能要3分钟)操作是比较耗时的。但是数据库的“读”(从oracle读…

  • 众数,中位数,平均_平均数中位数

    众数,中位数,平均_平均数中位数导读:本文带你了解各种形式的平均值,并理解其重要性。作者:尼尔·布朗(NeilBrowne)、斯图尔特·基利(StuartKeeley)来源:大数据DT(ID:hzdashuju)01…

发表回复

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

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