您的位置:首页 > 其它

px/em/rem的三者区别及其应用

2020-06-23 04:20 148 查看

px/em/rem的区别与应用

1、1px有多大?

我们先了解几个概念:

关键概念

设备像素:设备屏幕实际拥有的像素点一般来说:宽度方向有1920个像素点,长度方向有1080个像素点。
逻辑像素:CSS的像素单位(就是我们这次要讨论的csspx),其尺寸大小是相对的,也称为独立像素。
分辨率:屏长的设备像素 × 屏宽的设备像素(1920* 1080) ppi(pixels per inch):像素密度,表示沿对角线每英寸长度的像素数目(单位是dpi),越大显示的越细腻。
缩放因子(Scale Factor):逻辑像素相对于设备像素的放大比例,可通过

window.devicePixelRatio
获得,pc上可以用个个性化来设置,但二者并不完全等同

上面概念直接的关系

关系一:
  设备尺寸 × 像素密度 = 分辨率(设备像素)
举例:
  iphone6s 对角线长度为5.5 inches,像素密度401 ppi,分辨率 1920 * 1080,计算可得对角线的设备像素为2205.5。
  5.5 * 401 = 2205.5
关系二:
  逻辑像素(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的。
由公式一:当分辨率一样时,设备尺寸越大,像素密度越小,所以32寸的台式电脑看上去模糊一些。

相同分辨率,相同缩放因子情况下,不同设备尺寸下,表现是一致的举例说:
平时我们在pc上24英寸的电脑上开发的网页直接写的(px)。

在不做任何兼容处理的情况下,在15.6英寸的笔记本上也能正常显示。
由公式二:因为一般pc端,默认情况下缩放因子为1(window.devicePixelRatio= 1),分辨率也一样(1920 * 1080),
那么得到的 逻辑像素(css的px) 也是一样的,所以你在分辨率一样的情况下,在大屏电脑上设置的100px,在小屏电脑上也是100px。只是他们表现出来的大小不一致,小屏上面的1px更小。

如何将pc网页放到手机上展示?

我们可以调整网页在移动端上的缩放比例,这个值就是viewport。
默认情况下,移动端浏览器会将 viewport 宽度设为980px(也有可能是1024px 或其它值),也就是说1px = 设备屏幕宽度的1/980。
这跟缩放因子没有任何关系,这时的1px 非常小,所有的元素都变得非常小,移动端浏览器之所以这么做,
是为了尽可能完整的显示 PC 端的网页,然后允许用户通过缩放来查看细节。显然体验就变得有些差了,很多本来就比较小的元素就看不清楚了。
第二种方式是我们设置一个适当的缩放比例,一般我们这样设置:

<meta name="viewport" content="width=device-width">

那么对于iphone6来说根据公式:1px = 1/750(分辨率) * 2(缩放因子) = 1/ 375,显然比刚才的1/980大了不少,那么我们的元素如果还是按照原来的px去设置,那么屏幕肯定展示不下去了,这时候,如果我们的元素的px值能根据1px的大小是动态调整,我们的网页就完美了,这时候em,rem就派上用场了。

2、em是什么?

上面提到,想让我们的网页在不同分辨率的设备(移动端)上正常显示,最好我们的元素长宽,外边距,内边距等都是动态的

方式一:

上面说到,我们在移动端一般这样设置:

<meta name="viewport" content="width=device-width;initial-scale=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的font-size,那么其他的元素宽度就能动态变化了,显然方便很多。

3、rem是什么?

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

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);

总结

  1. 逻辑像素(css的px) = 设备像素 × 缩放因子
  2. 移动端更好的适配我们引入了em和rem这2个动态单位
  3. em的大小与父元素的font-size有关,rem的大小与根元素html的font-size有关
  4. 一般在移动端我们会使用js动态计算跟节点html的font-size来达到自适应的目的。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: