转贴2018篇前几天在思考设备像素比的时候，突然想到iphone6p的设备像素比是3，但是设备独立像素是414，414*3更大比1080有点糊涂，因为我一直以为物理像素/独立像素的比值就是设备像素比，所以才有了下篇评测。Devicepixel(dp)设备像素就是物理像素，是设备可以控制显示的最小单位，也就是显示屏幕上的像素点（比如iphone6宽750像素，长1334像素))屏幕尺寸是指屏幕的对角线长度，单位为英寸，1英寸=2.54厘米。屏幕分辨率是指手机屏幕的物理像素个数，是垂直设备像素和水平设备像素的表示。例如iphone6是1334750。屏幕像素密度（ppi）是指每英寸的物理像素数。Math.sqrt(Math.pow(1334,2)+Math.pow(750,2))/4.7设备无关像素（dip）也可以称为逻辑像素。这个点是供程序控制和使用的，是抽象的。今天的高分辨率屏幕使用多个设备像素来显示一个与设备无关的像素。比如iphone6上width的dip是375，iphone6+是414（标准模式）'，而window.screen.width可能的设备像素比（dpr）指的是设备像素与设备像素的比值设备独立像素。通常，将设备分辨率的宽度除以设备的逻辑宽度就足够了。比如iphone6就是750/375=2，可以在程序中通过window.devicePixelRatio获取。大多数情况下，我们的图片都是设置dpr2的，也就是说在实际情况下，iphoneX上显示的图片会稍微有些模糊。但是专门改编的很少，因为都是网上上传的图片。如果后台支持，可以使用srcset来做。你只需要提供图片资源和断点，剩下的将由浏览器智能处理。浏览器会根据场景自动匹配最佳显示图片。移动端完美支持，即使Android4.3和4.4不支持，如果是Locally，可以使用默认src，有熟悉的image-set可以用，但不支持Android4.3div{background-image:image-set(url(test.png)1x,url(test-2x.png)2x);}所以原生在终端的情况下，@2x和@3x图会被用来匹配相应的设备。viewportviewport是一个区域，浏览器从中计算宽度为百分比的元素的宽度。绘制图案。一般而言，PC端视口的大小与浏览器相同。移动端视口的宽度大多为980px。可以看出，移动端视口比真实的移动端屏幕要大。window.innerWidth所以我们在写代码的时候基本上都会在h5页面添加meta标签可以看到name=viewport，它是用来控制页面缩放的，但是我们平时看到的meta标签不止一个，那么meta标签的作用是什么呢？元标记是HTML标记的HEAD区域中的关键标记。它提供了文档的字符集、使用的语言、作者等基本信息，以及关键字和网页评级的设置。最大的作用是可以做搜索引擎优化（SEO）。Descriptopn和keywords通常用得最多。由于不同的手机对于搜索引擎搜索的设备独立像素不同，如果我在iphone6p上使用一个宽度为200px的div，在iphone6p上仍然只占屏幕不到一半，在iphone4上马上就超过一半了。这时候rem就派上用场了。rem(fontsizeoftherootelement)是根据根元素的font-size设置字体大小。和px一样，是CSS中的样式单位。会根据根元素的font-size值转换为px单位。公式为：px=rem*html(font-size)那么，如何选择一个基准来设置根元素的font-size呢？选择分辨率最宽的iPhone，跟着设计师走。五年前，设计师还是用iphone4的benchmark来定640，现在，设计师已经按照iphone6的benchmark定了750。那么，算法就很简单了device-width/750*100以iphone6为例，是dpr的2倍。375/750*100=50像素；本例设计稿上方24px，直接写0.24rem即可；0.24*50=12px用于实际渲染。在这种情况下，如果页面超过750px，就会出现超出PC大小的像素，所以我们需要判断在deviceWidth大于750px时，我们不应该改变根元素的font-size值（function(window){functionrefreshRem(){vardocEl=document.documentElement;varscreenWidth=docEl.getBoundingClientRect().width;varrem=Math.min(screenWidth,750)*100/750;docEl.style.fontSize=rem+'px';}refreshRem();window.addEventListener('resize',function(){clearTimeout(time);time=setTimeout(refreshRem,300);},false);})(window);$vm_base:750;@functionvw($px){@return($px/$vm_base)*100vw;}
