在说具体内容之前，我们必须了解几个概念，即：Retina屏幕、物理像素、设备独立像素、设备像素比在CSS中，我们一般以px为单位。需要注意的是，CSS样式中的px不等于物理像素。CSS中的像素只是一个抽象单位。在不同的设备上或者在不同的环境中，CSS中1px所代表的物理像素是不同的。在PC端，1px的CSS一般对应电脑屏幕的1个物理像素，但在移动端，1px的CSS等于多少个物理像素，跟屏幕的像素密度有关。Retina屏幕所谓“Retina”是一种显示标准，就是将更多的像素点压缩到一个屏幕中，从而达到更高的分辨率，提高屏幕显示的细腻度。由摩托罗拉开发。最初该技术用于MotoAura。该分辨率在正常观看距离下足以使人眼无法区分单个像素。也称为视网膜显示屏。Retina屏普遍用于Apple的产品，如MacBook、iPad、iPhone等。以配备RetinaDisplay的MacBookPro为例，显卡在工作时渲染2880x1800像素，每四个像素分组输出原始屏幕。图像中显示的一个像素区域的大小。这样，用户看到的图标和文字的大小与原来1440x900分辨率的显示屏一样，但精细度却是原来的4倍。但是对于特殊的元素，比如视频、图片，一个图片像素对应一个显示屏幕像素。因此，Windows的分辨率提升不会导致屏幕上的文字和图像变小，造成阅读困难。这样，在设计软件时，只需要将所有UI元素的精细度提高到原来的4倍，既能保持观看的舒适度，又能提升显示效果。2.物理像素物理像素又称为设备像素、设备物理像素。是显示器（电脑、手机屏幕）的最小物理显示单元。每个物理像素由一个颜色值和一个亮度值组成。所谓双屏、双屏（Retina）、三屏是指设备用多少个物理像素来显示一个CSS像素，也就是说多屏显示一个CSS像素的物理像素更多更细。对于CSS像素，在普通屏幕上1个CSS像素对应1个物理像素，但是在双Retina屏上，1个CSS像素对应4个物理像素（上面的Retina屏可以参考下图理解）。设备无关像素（device-independentpixel）就是我们写CSS时使用的像素。它是一个抽象单元，主要用于浏览器中，以准确衡量网页上的内容。设备像素比（devicepixelratio）设备像素比简称dpr，设备的物理像素与独立像素的比值。当此比例为1:1时，使用1个设备像素显示1个css像素。当这个比例为2:1=2时，1个css像素使用4(2-2)个设备像素显示。当比例为3:1=3时，9（3-3）个设备像素用于显示1个CSS像素。这里需要注意的是，dpr=2并不是说物理像素是设备独立像素的2倍，而是用4个物理像素代表一个设备的一个逻辑像素。应该说设备无关像素是物理像素的4倍。因为你的4个网络物理像素代表我的1个设备独立像素dpr只代表一个数字比例，不是倍数关系。CSS的1px等于几个物理像素，这不仅与屏幕像素密度dpr有关，还与用户缩放有关。例如，当用户将页面尺寸扩大一倍时，CSS中1px所代表的物理像素也会翻倍；反之，如果页面翻倍，CSS中1px表示的物理像素也会翻倍。关于这一点，我会在文章后面讲到1px的细线问题。viewport视口是设备上用来显示网页的区域，但视口并不限于浏览器可视区域的大小，它可能大于浏览器的可视区域，也可能小于浏览器的可视区域。默认情况下，一般来说，移动设备上的视口大于浏览器的可视区域。这是因为移动设备的分辨率相对于台式机来说是比较小的，所以为了能够在设备上正常显示那些专为桌面浏览器设计的传统网站，而移动设备上的浏览器会将其默认视口设置为980px或者1024px（或者其他值，这个由设备自己决定），但是用的后果是浏览器会有水平滚动条，因为浏览器可见区域的宽度小于默认视口的宽度。这里我们需要识别三种视口 1。visualviewport可见视口是指屏幕宽度 2。layoutviewport布局视口是指DOM宽度 3。idealviewport理想适配，制作布局视口可见视口为理想视口获取屏幕宽度（可视视口）的大小：window.innerWidth/Height获取DOM宽度（布局视口）的大小：document.documentElement.clientWidth/Height设置idealviewportidealviewport:的meta标签的作用是让布局视口的宽度等于视觉视口的宽度，并且不允许用户手动缩放，从而达到理想的视口。 meta[name="viewport"]中参数的含义为： width：设置布局视口的宽度，为正整数或字符串“width-device”。 initial-scale：设置页面的初始缩放值，为数字，可以带小数。 minimum-scale：用户允许的最小缩放值，为数字，可以带小数。 maximum-scale：用户允许的最大缩放值，为数字，可以带小数。 height：设置布局视口的高度，这个属性对我们来说不重要，很少用到。 user-scalable：是否允许用户缩放，值为“no”或“yes”。rem适配WakaKaka，最后说到手机屏幕适配方案。也许你想骂你妈，不过别着急，上面的东西没说清楚，下面是改编，我也看不懂。rem是相对于根元素的字体大小单位，也就是html的font-size，浏览器默认的字体大小是16px，所以默认1rem=16px，我们可以动态设置font-size的根元素根据设备宽度，使得rem中的元素在不同终端呈现出相对一致的视觉效果。实际上，rem将屏幕划分为指定的部分。以20份为例，每份1rem。1rem对应的大小就是rem的参考值。rem的作用是给的font-size赋予rem参考值。所以如果设备的物理像素宽度为640px，分成20份，则1rem=640px/20=32px，的font-size为32px。//这段代码放在head标签里面(function(){varhtml=document.documentElement;functiononWindowResize(){html.style.fontSize=html.getBoundingClientRect().width/20+'px';}window.addEventListener('resize',onWindowResize);onWindowResize();})();当然你也可以分为30、40、60等，看你的喜好。我们在实际切图的时候，对于视觉稿上的元素尺寸转换只需要将元素的原始px值（也就是你测量的尺寸）除以rem参考值即可。比如设计稿尺寸是640px，rem参考值=640px/20=32px，你测量的一个元素尺寸是140px286px*，那么换算就是：140px=140/32=4.375rem286px=286/32=8.9375rem这样我们就可以用rem代替pixelpx，而且在所有移动端都是自适应的。这种方法是目前比较好的适配方法，但是rem计算起来很麻烦，小数点很多。这时候，你可以试试用less.js来解决rem的十进制问题。rem+vw适配什么是vw和vh？vw：1vw等于视口宽度的1%vh：1vh等于视口高度的1%vmin：选择vw和vh中最小的vmaxvmax：选择vw和vh中最大的一个并使用视口单位来衡量，视口宽度为100vw，高度为100vh（左侧为竖屏情况，右侧为横屏情况）。比如在桌面浏览器中view的端口大小是650px，那么1vw=650*1%=6.5px（这是理论上计算出来的，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）注意：这里的1%指的是viewport1%，而不是我们定义的div的1%。如何使用rem+vw进行屏幕适配？我们以设计稿为750px为基准。第一步：设置meta标签步骤2：设置html的font-size{font-size:13.33333333vw}为什么font-size=13.33333333vw？下面我们来分析一下其中的原理。上面我们说vw是指屏幕宽度的1%，而我们的设计稿通常是750px，屏幕一共是100vw，对应750px，那么1px就是0.1333333vw。同时我们知道rem，rem是相对于html元素的字体大小。为了计算方便，我们取html=100px的font-size。根据以上计算结果，1px为0.13333333vw，则100px为13.333333vw。所以，我们让1rem=100px=13.333333vw那么在项目中就可以很好的使用了。当我们通过ps测量一个div的尺寸为width:200px,height:137px时，我们可以这样写，ps测量的像素直接除以100，计算小数非常方便div{width:2rem;高度：1.37rem；是不是相对于之前的rem适配就不需要计算小数了？作者：炸皮卡丘来源：CSDN原文：https://blog.csdn.net/im_dogg...版权声明：本文为博主原创文章，转载请附上博文链接！
