像素是构成图像的基本单位 同样大小的图像 像素点越多 图像就越清晰 所以手机的屏幕分辨率越高，界面内容就会越精致 比如iphone11的手机屏幕分辨率为1792x828像素分辨率，就是这个屏幕横向有828个像素点，纵向有1792个像素点 此时这些像素点也叫做屏幕的物理像素。
一开始手机的分辨率很低，界面看起来很粗糙 但随着科技的发展，手机的分辨率越来越高，界面也看起来越来越精致。
问题：比如一部手机分辨率为320x470，另一部手机的分辨率为640x940，理论上后一部手机的分辨率是前一部的两倍，那前一部手机上相同的图片和文字在后一部手机屏幕上理应会被缩放一倍，更高分辨率上的手机的话会缩小的更多，但实际我们发现并没有这样。
乔布斯在iphone4的发布会上首次提出了Retina Display(视网膜屏幕)的概念,完美的解决上了上面的问题，就是在iphone4的视网膜屏幕中把2x2个像素当成之前的1个像素使用，这样的话元素的大小没有变，屏幕还会看起来更精致（此处的像素应该是指物理像素）。
问题：比如列表的宽度为300像素，这里的像素最早其实指的就是物理像素，当手机屏幕上渲染图像的时候，手机都会按照300个物理像素来渲染，从上面我们知道这样肯定是不对的，所以我们需要一种单位来告诉不同分辨率的手机，元素在屏幕上实际的大小是多少，然后再去计算用多少物理像素去渲染，于是出现了设备独立像素这个单位，此时我们可以说列表的宽度为300个设备独立像素。
设备独立像素是用来描述屏幕的实际大小的单位，我们F12打开控制台，移动端模式，我们会发现不同的手机都有他自己的尺寸，比如iphone6/7/8的尺寸是375x667，但这又不是他的分辨率大小，其实这里的尺寸就是设备独立像素。所以列表的宽度为300像素，此时的像素现在指为设备独立像素。
问题：有了设备独立像素，又有了下一个问题，独立像素与物理像素之间的关系，因为我们要通过他们之间的关系来用物理像素渲染图像，此时又有了一个新概念，设备像素比DPR。
设备像素比简称DPR，DPR = 物理像素/设备独立像素，（这个计算公式我也不是很清楚，不过也没必要知道，对于我们开发没啥影响），浏览器中我们可以通过window.devicePixelRatio来获取，比如iphone4S的DPR为2，也就是用2x2个物理像素当成一个设备像素。
前端在实际的web开发中，我们用到的单位是px, 也是像素，此时的CSS像素与设备独立像素肯定也是有这某中关系，所以适配的流程其实就是CSS像素->设备独立像素（屏幕的大小）->物理像素（分辨率），个人理解。
布局视口：网页布局的基准窗口，在PC浏览器上，布局视口就等于当前浏览器的窗口大小（不包括borders 、margins、滚动条）。 在移动端，布局视口被赋予一个默认值，大部分为980px，这保证PC的网页可以在手机浏览器上呈现，但是非常小，其实就是缩放了。
视觉视口(visual viewport)：用户通过屏幕真实看到的区域。视觉视口默认等于当前浏览器的窗口大小（包括滚动条宽度）。
理想视口：布局视口在移动端展示的效果并不是一个理想的效果，于是就有了理想视口，网站页面在移动端展示的理想大小，在用户不进行手动缩放的情况下，可以将页面理想地展示。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。
当页面缩放比例为100%时，一个CSS像素等于一个设备独立像素的时候。 页面的缩放系数 = CSS像素 / 设备独立像素，实际上说页面的缩放系数 = 理想视口宽度 / 视觉视口宽度更为准确。（此时的缩放比例是浏览器控制的） 所以，当页面缩放比例为100%时，CSS像素 = 设备独立像素，理想视口 = 视觉视口 = 布局视口。 设置理想视口
适配的几种方式 媒介查询 视口宽度在830px到1024时对应的布局 此时的CSS像素其实就是设备独立像素，也就是屏幕的大小。 @media (min-width: 830px) and (max-width: 1024px){ /* 条件下样式的修改 */ }
Rem适配 就是将屏幕的宽度等分为N份 将一份的长度作为一个基准，设置html的font-size为这个基准 然后根据这个基准来描述界面元素的大小 单位是rem 这个基准可以通过js来设置 也可以通过媒介查询来设置 当设计稿与手机的设备像素不同的时候，浏览器会自动缩放页面。 当用作图片或者一些不能缩放的展示时，必须要使用固定的 px 值，因为缩放可能会导致图片压缩变形等。
viewport适配 设置当前标签 布局视口等于设备宽度 缩放比例为1 元素大小用px来描述 其中user-scalable设置为no 可以解决移动端点击事件延迟问题
vh和vw方案 和rem方案其实是一样的 将视口等分为了100份
适配方案 看过某个大佬一个文章，对于其中的适配理念个人是比较推崇的 用户之所以去买大屏手机，不是为了看到更大的字，而是为了看到更多的内容 所以推荐他的适配方案 px为主，vx和vxxx（vw/vh/vmax/vmin）为辅，搭配一些flex（推荐）
移动端适配流程
- 在head 设置width=device-width的viewport‘
- 在css中使用px
- 在适当的场景使用flex布局，或者配合vw进行自适应
- 在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询
- 在跨设备类型如果交互差异太大的情况，考虑分开项目开发
juejin.cn/post/684490… 大佬的适配文章
这个文章是建立在多篇文章的基础上的个人理解，后面说的比较简单，就是那么个道理，理解万岁。
