1px有多大？先了解几个概念：关键概念设备像素：设备屏幕的实际像素一般来说：宽度方向有1920像素，长度方向有1080像素。逻辑像素：CSS的像素单位（也就是我们这次要讨论的CSS的px），它的大小是相对的，也称为独立像素分辨率：屏幕长度的设备像素×屏幕宽度的设备像素（1920*1080)ppi（pixelsperinch）：像素密度，表示沿对角线每英寸的像素数（单位为dpi），显示器越大，越细腻比例因子（ScaleFactor）：逻辑的放大倍率pixelsrelativetodevicepixels，可以通过`window.devicePixelRatio`获取，也可以在PC上进行个性化设置，但两者并不完全等同于上述概念。直接关系1： 设备尺寸×像素密度=分辨率（设备像素）例： iphone6s对角线长度5.5英寸，像素密度401ppi，分辨率1920*1080。计算出的对角线设备像素为2205.5。 5.5*401=2205.5关系二： 逻辑像素（csspx）=设备像素×缩放因子例： iphone6逻辑像素为375*667，分辨率为750*1334，缩放因子为2 1logicalpixel(1px)=1/375 ofdevicewidth1devicepixel=1/750 ofdevicewidth1/375=1/750*2以上参考：1pxisexactlyHowbig是公式得出的结论在PC端分辨率相同的情况下，屏幕尺寸越大，显示越模糊（因为dpi越小）。例如：我们的台式电脑屏幕一般为32英寸，分辨率为1920x1080。一般笔记本为15.6英寸，分辨率也是：1920x1080。公式一：分辨率相同时，器件尺寸越大，像素密度越小。所以32英寸的台式电脑看起来很模糊。在相同分辨率、相同缩放倍数、不同设备尺寸的情况下，表现是一致的。例如：通常我们直接在PC上写24寸电脑开发的（px）网页，不做任何兼容处理。在15.6寸的笔记本上也可以正常显示。从公式2：因为一般的PC端，缩放因子默认为1（window.devicePixelRatio=1），分辨率相同（1920*1080），那么得到的逻辑像素（csspx）也相同.所以当你同样分辨率的时候，大屏电脑上设置的100px在小屏电脑上也是100px。只是他们显示的尺寸不一致，小屏上的1px更小了。如何在手机上显示PC网页？我们可以在移动端调整网页的缩放比例，这个值就是viewport。默认情况下，移动浏览器将视口宽度设置为980px（或1024px或其他值），这意味着1px=设备屏幕宽度的1/980。这与比例因子无关。这时候1px就很小了，所有的元素都变得很小了。手机浏览器之所以这样做，是为了尽可能完整地展示PC端的网页，然后让用户通过缩放的方式查看细节。很明显体验特别差，很多比较小的元素都看不清楚。第二种方式是我们设置一个合适的比例因子。一般我们这样设置：那么对于iphone6，根据公式：1px=1/750（分辨率）*2（缩放倍数）=1/375。很明显，比刚才的1/980大了很多，所以如果我们的元素还是按照原来的px设置，那画面肯定是显示不出来的。这时候如果我们的元素的px值能够动态的按照1px的大小进行调整，我们的网页就完美了，这时候em,rem就派上用场了。什么是他们？上面说了，如果我们想让我们的网页在不同分辨率的设备（移动端）上正常显示，那么我们的元素的长宽、外边距、内边距等最好都是动态的。方式一：上面说到，我们在移动端，一般是这样设置的：这个时候我们知道1px的大小，在iPhone6上：1px=1/750（分辨率）*2（比例因子）=1/375。由于1px的大小是固定的，我们只能动态改变一个元素设置的px，比如在iPhone8上是120px；它需要在iPhone6上为100px。这时候我们可以使用js动态计算，根据屏幕大小。但是显然很麻烦。需要调整每个元素的长、宽、内边距和外边距。这显然是一项浩大的工程。这时候我们就可以使用em单位了。em单位的名称是相对长度单位，根据其父元素的字体大小计算。通常，默认情况下：16px=1em。如果父元素字体大小：16px，子元素边距：0.8em。那么得到的大小就是：0.8*16=12.8。当所有单元都使用em时，我们只需要改变body的font-size，那么其他子元素的宽度就可以动态改变了，显然方便很多。什么是雷姆？'rem'是'css3'添加的新的相对长度单位。它似乎解决了em的缺点。em可以说是相对于父元素的字体大小。当父元素的字体大小发生变化时，就不得不重写calculate。rem的出现可以解决这样的问题，rem只是相对于根目录，也就是HTML元素。有了rem单元，我们只需要调整根元素html的font-size即可实现所有元素的动态适配，附上通用适配代码：/***========================================================================================================================================*设置根元素font-size*当设备宽度为375（iPhone6）时，根元素font-尺寸=16px；×==================================================*/(function(doc,win){vardocEl=win.document.documentElement;varresizeEvt='orientationchange'inwindow?'orientationchange':'resize';varrefreshRem=function(){varclientWidth=win.innerWidth||doc.documentElement.clientWidth||doc.body.clientWidth;console.log(clientWidth)if(!clientWidth)return;varfz;varwidth=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();})(文档,窗口);摘要逻辑像素（css的px）=设备像素×比例因子为了更好的适配移动端，我们引入了两个动态单位em和rem。em的大小与父元素的font-size有关，rem的大小与根元素html的font-size有关。一般在移动端，我们会使用js动态计算节点html的font-size，达到自适应的目的
