从画面开始。屏幕由一个个显示单元组成。1每个显示单元在物理世界中都是真实的；2、一个显示单元的大小称为“物理像素”；3通常我们所说的“分辨率”是指一块屏幕上显示单元的数量，比如750*1334，就是说这块屏幕是由750*1334个显示单元组成的。映射规则像素是计算机系统里面的单位，通常我们让一个像素对应一个显示单元。所以有时候，我们说屏幕的高度是667px，其实就是说屏幕的高度有667个显示单元的高度之和。随着技术的发展和进步，显示单元可以做得越来越小。比如以前是10mm*10mm的显示单元，现在我们可以做5mm*5mm的显示单元。为什么要追求小型显示单元？因为图像越小，它就越精细。但是：显示单元越小，屏幕的分辨率就越大。这里涉及到一些东西：假设屏幕尺寸不变，但分辨率从A变为2A（即显示单元缩小一半）并且：一个像素对应一个显示单元，这个规律依然存在不变。这时候，你在这个2A的屏幕上渲染了一个宽度为100px的元素，你会明显的发现：视觉上：这个100px明显比之前小了，和之前的50px一样大。怎么办，会这样显示肯定是不行的，所以我们要处理这种情况：1.我们规定一个大小为n*n的显示单元为标准显示单元，而标准意味着它符合我们长期的判断：100px在物理世界中大约有100个像素。多大。2我们需要知道当前屏幕的显示单元与标准显示单元的尺寸比例，比如当前屏幕的显示单元尺寸是标准尺寸的一半还是三分之一。通过使用devicePixelRatio属性，我们可以想到：devicePixelRatio标记为：当前设备的标准显示单位/显示单位，以上为准，可以动态调整元素的大小，例如，宽度一个元素x是100px；devicePixelRatio=1的设备的宽度为devicePixelRatio=2的设备上100px的宽度为200px；好的，那我们开始吧。根据不同的devicePixelRatio调整元素的样式。varbox=document.querySelector('.box');varheight=parseInt(getComputedStyle(box).height);varwidth=parseInt(getComputedStyle(box).width);box.style.height=height*parseInt(window.devicePixelRatio)+'px';box.style.width=width*parseInt(window.devicePixelRatio)+'px';这只是一个元素的两个属性，1000个元素，每个元素有5个属性，看哭了。所以这种处理是绝对不允许的。然后我们找到了rem单位。它的简单解释：当你设置height:2rem元素A它会找到根节点（html）的font-size值，比如16px，然后取16*2=32px作为元素A的最终高度。这个可以用1让元素以rem为单位2然后控制根元素的font-size值，在不同的devicePixelRatio下，呈现不同的值。比如你可以设置：devicePixelRatio=1,font-size(root)=100px;devicePixelRatio=2,font-size(root)=200px;element这时候会自动响应大小变化。好的，让我们开始吧：varfontSize=100*parseInt(window.devicePixelRatio)+'px';document.documentElement.style.fontSize=fontSize;嗯，效果还是不错的，在不同的分辨率下，我们也可以实现相同的页面。其实上面的讨论已经解决了我们的问题：如何让一个100px的元素，对应物理世界的大小永远不变？现在更进一步，上面的讨论固定了一个变量：屏幕尺寸，现在放开这个变量，固定屏幕分辨率这个变量。这个问题变得合适匹配问题：场景描述：比如你的一个页面本来是基于375的宽度做的，那么当设备的宽度变成320px的时候，你的页面就会出现问题：挤压，变形，混乱，或者我该怎么办？希望在320上也能正常显示：将页面所有元素变小，就ok了。比如一个元素在375的设备上显示这么大，就320，显示这么大就够了。那么如何缩小呢？雷姆;想一想，只要在??屏幕宽度变小的时候根元素的font-size变小，那么所有以rem为单位的元素，是不是也变小了，目的就达到了。那么如何让font-size(root)随着屏幕的宽度变小而变小。选择一对基准值，例如：375px/100px；表示屏幕宽度为375时，font-size(root)为100；每次计算一下就可以了。比如你发现当前屏幕宽度是320，这时候是不是可以不计算font-size(root)了？？计算不会设置根元素的font-size吗？好了，上面说了暂时不要尝试，我先提一件事。以上所有讨论其实都是基于：当你的屏幕分辨率是100100时，你有一个100100大小的容器来展示你的网页比如你的iPhone7的分辨率是6671334，那么你有一个6671334大小的容器来放你的网页.不幸的是，这种情况并非如此。从iPhone发布前夕：开发者发现原来为PC开发的网页在iPhone上显示不全，这部分可以通过滚动来解决。但是使用百分比布局的页面是作弊的。原本属于PC浏览器的20%在iPhone上一点点，布局完全乱了。坑。为了解决这个问题，开发者提出了一个新的gadget：'layoutviewport'这个gadget我应该怎么解释。===============//这是你的基于百分比页面的宽度===//这是你屏幕的宽度。这样一来，页面肯定会乱七八糟。所以提议的布局视口将模型更改为：==============//Thisisthewidthyourpercentagepageisbasedon=============//布局视口的宽度===//这是你屏幕的宽度你的页面将被放置在布局视口容器上，然后将布局视口缩小到与屏幕宽度相同的大小。并允许用户通过滑动滚动条来放大页面和浏览所有页面。一开始这种方式确实解决了pc端页面在手机上浏览是个问题，但是随着移动端的兴起，产生了大量的移动端专用页面，也就是模型变成了像this:===//为移动端制作的页面============//layoutviewport===//屏幕的宽度显然是个问题：你的页面首先放在布局视口，然后缩小最后和屏幕宽度一致的显示就是你的页面明显缩小了。所以我们需要通过改变布局视口的大小使其与屏幕的宽度保持一致来解决这个问题。假设屏幕的显示单元始终是标准的，那么显示单元的大小如何才能让布局视口与屏幕的宽度保持一致呢？通过metaname="viewport"标签。解释一下：metaname="viewport"有一个content属性，它有几个值可以用来处理layoutviewport。内容有如下字段：initial-scale：这个值会影响最终布局视口的宽度，计算公式应该如下：屏幕分辨率/(devicePixelRatio*initial-scale)=最终布局视口的宽度屏幕。我们可以得到屏幕的分辨率，也可以得到devicePixelRatio。比如iPhone7，屏幕分辨率是750*1334，devicePixelRatio=2，当你设置initial-scale=1的时候，layoutviewport的最终宽度是375；这里有一点，我告诉你；我们可以通过设置初始比例来使布局视口的宽度为任意值。那我们应该设置多少呢？可以设置为375，这个宽度是以标准显示单位计算的宽度，也可以设置为750。这样的话，你的1px就完全对应了这个设备的1个显示单元。我们选择后者，因为这涉及到1px边框的实现。如果设置成这个，那么你的initial-scale总是可以设置成1/devicePixelRatio，因为devicePixelRatio*1/devicePixelRatio=1；还有两个相关的属性：maximum-scale:可以放大多少minimum-scale:可以放大多少minimum是不能缩放的，因为我们的页面不缩放也能正常显示，如果不缩放显示会不正确放大。最终规划：我们需要做的是1.让布局视口变成和屏幕分辨率一样宽2.根据设备宽度和devicePixelRatio指定根元素的font-size值。经过这些操作，就可以实现最终的代码了。
