当前位置:首页 > 天道酬勤 > 正文内容

2em和2px有什么区别(em与px的区别)

张世龙2021年12月18日 00:50天道酬勤1790

1px是多少?

让我们先了解一些概念:

重要概念

设备像素:设备屏幕实际拥有的像素点一般在宽度方向上有1920个像素点,在长度方向上有1080个像素点。

逻辑像素: CSS的像素单位。 这是我们要讨论的CSS的px,其大小是相对的,也称为独立像素

分辨率:画面长度的设备像素画面宽度的设备像素(1920 * 1080 ) ) )。

PPI (像素) )像素密度是表示对角线上每英寸长度的像素数(单位为dpi ),越大则显示得越精细

缩放系数(Scale Factor ) )逻辑像素相对于设备像素的放大率可以在` window.devicePixelRatio `中获得,可以在pc中单独设置,但两者不完全相等

的概念的直接关系

关系1 :

设备大小像素密度=分辨率(设备像素) ) ) ) ) )。

示例:

iphone6s的对角线长度为5.5英寸,像素密度为401 ppi,分辨率为1920 * 1080,能够获得对角线的器件的像素为2205.5。

5.5 * 401=2205.5

关系2 :

逻辑像素(css的px )=设备像素缩放系数

示例:

iphone6的逻辑像素为375 * 667,分辨率为750 * 1334,比例系数为2

1逻辑像素(1px )=设备宽度的1/375

1设备像素=设备宽度的1/750

1/375=1/750 * 2

从公式中得出的结论

PC侧的分辨率相同时,画面越大,dpi越小,因此显示得越模糊。

举例说明:

我们的台式电脑屏幕通常是32英寸,分辨率为1920 * 1080。 一般的笔记本电脑是15.6英寸,分辨率也是1920*1080。 式1 )分辨率相同的情况下,设备尺寸越大像素密度越小。 所以32英寸的台式电脑看起来有点模糊。

对于相同的分辨率、相同的比例系数、不同的设备大小,表示法是一致的。

平时我们在pc上用24英寸的电脑开发的网页上直接写的(px ),不做任何兼容处理,在15.6英寸的笔记本电脑上也能正常显示。 式2 )由于是一般的pc端,默认情况下缩放系数为1(window.devicepixelratio=1),分辨率也相同) 1920 * 1080 ),则得到的**逻辑像素(css的px ) 所以,你分辨率一样,大屏幕电脑上设置的100px,小屏幕电脑也是100px。 只是,他们显示的大小不一致,小屏幕上的1px更小。

如何在手机上显示电脑的网页?

可以调整移动终端上网页的缩放比例。 这个值就是视口。 默认情况下,移动浏览器将视口宽度设置为980px、1024px等值。 也就是说,1px是设备屏幕宽度的1/980。 这和缩放系数没有任何关系。 此时的1px非常小,所有的元素都非常小。 移动端浏览器这样做是为了尽可能完整地查看PC端的网页,并允许用户通过缩放查看详细信息。 很明显,体验是另一回事,很多本来就很小的因素已经看不见了。 第二种方法是设置适当的缩放比例。 一般设定如下。

元名称='视点'内容=' width=设备- width '

那么,关于iphone6,根据1px=1/750 (分辨率)2)比例缩放系数)=1/375 )这一公式。 显然比刚才的1/980大了很多,所以我们的要素如果保持原来的px,就无法在画面上显示吧。 这时,如果我们元素的px值能够根据1px的大小动态调整,我们的网页就会变得完美。 此时,em、rem会很有用。

什么是em?

如上所述,为了使我们的网页在不同分辨率的设备(移动端)上正常显示,我们希望我们的要素的纵横、外侧的距离、内侧的空白等是动态的

正如

方式一:
上所述,我们在移动端这样设定。

元名称='视点'内容=' width=设备- width; 初始比例=1'

这个时候,我们知道1px的大小。 在iPhone6上,1px=1/750 (分辨率)2)缩放系数)=1/375。 既然1px的大小是固定的,我们就只能动态改变一个元素设定的px。 例如iPhone8的话是120px。 iPhone6需要100px的电脑。 此时,我们使用js进行动态计算,根据画面大小。 但是,显然很麻烦,需要调整各要素的纵横、内边距和外间距。 这显然是一个巨大的工程。 这个时候,我们可以使用em这个单位。 em单位的名称是相对长度单位,根据其父元素的字体大小计算。 默认情况下,通常为16px=1em。 父元素font-size:16px时,子元素margin:0.8em。 于是得到的大小为:0.8 * 16=12.8。 所有单位采用em时,我们只需要改变body的字体大小,其他要素的宽度就会动态变化,显然很方便。

什么是rem?

“rem”是“CSS3”新添加的相对长度单位,它的出现是为了解决em的缺点,e

m可以说是相对于父级元素的字体大小,当父级元素字体大小改变时,又得重新计算。rem出现就可以解决这样的问题,rem只相对于根目录,即HTML元素。有了rem这个单位,我们只需要调整根元素html的font-size就能达到所有元素的动态适配了,附上一段常用适配代码:

/** * ================================================ * 设置根元素font-size * 当设备宽度为375(iPhone6)时,根元素font-size=16px; × ================================================ */ (function (doc, win) { var docEl = win.document.documentElement; var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; var refreshRem = function () { var clientWidth = win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth; console.log(clientWidth) if (!clientWidth) return; var fz; var width = clientWidth; fz = 16 * width / 375; docEl.style.fontSize = fz + 'px';//这样每一份也是16px,即1rem=16px }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, refreshRem, false); doc.addEventListener('DOMContentLoaded', refreshRem, false); refreshRem(); })(document, window);

总结

逻辑像素(css的px) = 设备像素 × 缩放因子为了移动端更好的适配我们引入了em和rem这2个动态单位em的大小与父元素的font-size有关,rem的大小与根元素html的font-size有关一般在移动端我们会使用js动态计算跟节点html的font-size来达到自适应的目的。

扫描二维码推送至手机访问。

版权声明:本文由花开半夏のブログ发布,如需转载请注明出处。

本文链接:https://zhangshilong.cn/work/23832.html

分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。