移动端基础知识
像素
物理像素
物理像素指的是屏幕渲染图像的最小单位，属于屏幕的物理属性，不可人为进行改变，其值大小决定了屏幕渲染图像的品质
逻辑像素
CSS像素
CSS像素，与设备无关像素，指的是通过CSS进行网页布局时用到的单位，其默认值(PC端)是和物理像素保持一致的（1个单位的CSS像素等于1个单位的物理像素），但是我们可通缩放来改变其大小。
移动端像素
设备独立像素
可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。
分辨率
屏幕的长方向的像素个数乘以宽方向的个数，就是屏幕的分辨率。
屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细
代码案例：
.Box{
width: 2px; /* 逻辑像素 */
height: 2px; /* 逻辑像素 */
}
设备像素比
定义
window.devicePixelRatio是设备物理像素和设备独立像素之间的比率。
dpr：device pixel ratio
dpr=设备像素/css像素
缩放
物理像素是不能改变大小的
缩放其实就是改变1css 像素等于多少个物理像素，换言之，就是1个css像素需要用多少个物理像素表示
放大
- 原来，1个css像素=1个物理像素
- 放大2倍，就是让1个css像素的宽和高都放大2倍，所以我们看到在右边屏幕上，放大2倍后，1个css像素就占用了4个像素点
- 所以，放大2倍后，1个css像素=2x2个物理像素
缩小
- 原来1个css像素=1个物理像素
- 缩小到1/2后，1个css像素的宽和高都缩小到原来的1/2，所以我们看到右边屏幕上，缩小后，4个css像素才等于1个css像素
- 所以，缩小1/2后，2x2个css像素=1个物理像素
ppi
pixels per inch，表示每英寸的物理像素点，这考验一个屏幕厂商的设计和生产能力
ppi，也称作 dpi(dots per inch)
如小米11的 ppi 为 515
屏幕上的像素点也是多，也是密集，则显示就越精细，所以 ppi 是一个屏幕显示效果的重要参数
视口
视口(Viewport)是移动Web开发中一个非常重要的概念，最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。在苹果公司引入视口的概念后，大多数的移动开发者也都认同了这个做法。
简单来说，视口就是浏览器显示页面内容的屏幕区域。在移动端浏览器中，存在着三种视口，即布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)，下面分别进行详细讲解。
布局视口（layout viewport）
布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备不同，布局视口的默认宽度有可能是768px、980px或1024px……等，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很大，一般默认可以通过手动缩放网页，但是这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。
在上图中，当移动端浏览器展示在PC端网页内容时，由于移动端设备屏幕比较小，不能像PC端浏览器那样完美的展示网页，这正是布局视口存在的问题。这样的网页在手机浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。
视觉视口
视觉视口是指用户正在看到的网站的一个区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。
**注意：**当我们在手机中缩放网页的时候，操作的是视觉视口，而布局视口仍然保存原来的宽度。
理想视口（ideal viewport）
理想视口是指对设备来讲最理想的视口尺寸。采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。
在理想视口的情况下，布局视口的大小和屏幕宽度是一致的，这样就不需要左右滚动页面了。在实际开发中，为了实现理想视口，需要给移动端页面添加Meta标签配置视口，通知浏览器进行处理。
