1.获取设备的真实开发分辨率（逻辑分辨率）。最近查了很多关于移动端适配的资料，把人搞糊涂了，得到了很多名词：CSS像素、物理分辨率、逻辑分辨率、设备像素比、PPI、DPI、DPR、DIP、Viewport其实对于发展，只需要了解三个概念。物理分辨率是设备上的标称分辨率。逻辑分辨率，开发时使用的分辨率。设备像素比，物理分辨率与逻辑分辨率的比值。例如，iphone6的物理分辨率为750x1334，逻辑分辨率为375x667，设备像素比为2(750/375)。打开chrome控制台，切换到设备工具栏，选择iphone6设备，查看其逻辑分辨率。通常称为UI设计稿2倍图、3倍图。这个倍数指的是设备像素比。比如设计稿是图片的2倍，里面的字体是24px，那么我们可以用24/2得到开发用的像素是12px。大多数Apple设备都可以找出它们的逻辑分辨率是多少。但是Android设备不是，所以需要使用其他方式。知道物理分辨率如果知道物理分辨率，就可以通过window.devicePixelRatio获取设备像素比。然后通过公式得到逻辑分辨率。逻辑分辨率=物理分辨率/设备像素比比如PC上的设备像素比为1，开发PC页面非常简单。设计稿上有多少像素就可以写多少像素。什么都不知道即使你连物理分辨率都不知道，也没关系，还有一种方法可以得到设备的逻辑分辨率。在页面上创建一个刚好覆盖全屏的div元素，然后获取它的宽高，也就是设备的逻辑分辨率。.test-div{位置：固定；左：0；顶部：0；宽度：100vw；高度：100vh；background:red;}document.querySelector('test-div').clientWidth//宽document.querySelector('test-div').clientHeight//高度我有一个华为m5平板和一个华为m5pro平板，尺寸分别为10.1英寸和10.8英寸，通过该方法得到的逻辑分辨率分别为960×600、1024×640。如图（华为m5）：为了证明推断正确，我拿了一个m5pro上专门用的app，在chrome上运行（模拟设备的逻辑分辨率），完美契合。为什么不使用window.screen.width或window.screen.height来获得逻辑分辨率呢？参见MDN的解释：请注意，并非所有此属性返回的高度值都适用于浏览器窗口。任务栏或其他特殊程序窗口等小部件可能会减少浏览器窗口和其他应用程序的可用空间。也就是说，返回的高度有一部分可能被其他程序占用了。PS：如果app不需要在移动设备上全屏显示，那么在chrome上模拟设备大小时要减去设备状态栏的高度。2、页面适配在css中有很多相对长度，其中常用的有em、rem、vw、vh等，rpx也用在小程序中。不管是rem、vw还是rpx，都跟屏幕宽度有关。使用这些测量单位开发的页面可能与所有移动设备不兼容。比如一个完美适配iphone6的页面，在平板上可能会出现样式问题。适配iphone的页面：在平板下会乱：为此有些网站做了多套样式的适配网站。例如，手机、平板、PC访问的网站风格是不一样的。然而，维护这样的网站需要大量的工作并且很麻烦。而且现在手机和手机差别很大，需要写很多@media来解决适配的问题。AFeasibleSolution我认为有一个更可行的解决方案，有助于适配多种移动设备。即整体布局以vw和百分比%为计量单位，内容样式以px为计量单位。从以上三张图可以看出，使用px作为内容样式的度量单位，可以适配多种终端。即使是为移动设备编写的网站也可以适用于PC。该方案简单方便，一劳永逸。目前我开发的移动端项目都是用这个方案，还没有遇到适配问题。而且这样写还有一个好处，就是更大的屏幕可以看到更多的内容，而不是看到更大的内容。例如，在手机上，一行只能显示x个字符，如果内容超出屏幕，则必须用省略号代替。如果换成平板电脑，或许可以完整显示内容。其他解决方案在此站点上找到了另一种解决方案。本站整体布局和内容均以vw为计量单位，移动端没有问题。但是在PC端，它使用了scale属性。即当它检测到你的设备是PC时，它会使用scale来缩小网站，最大宽度固定为750px。这样，即使内容样式以vw为计量单位，也不会有样式混乱的问题。栅格化布局在某些情况下，可以使用栅格化布局。例如，当页面分辨率较大时，采用三栏布局；当页面分辨率较小时，采用两栏布局。
