css像素单位理解

前言

在前端开发网页中，css中的px是我们经常使用的一个像素单位，也是我们日常工作过程中需要考虑的有关前端适配的一个问题，那么关于px像素涉及到什么样的适配问题，以及怎样解决，下面我们就从理解前端尺寸的几个相关概念开始。

相关概念

• 设备尺寸 设备尺寸是指设备对角线长度

  我们看手机的规格参数时，通常会有屏幕尺寸的参数，单位为英寸，它代表设备屏幕尺寸的对角线长度，1英寸=2.54厘米

• 设备像素 设备像素是设备的物理像素，是屏幕成像的最小单位，其尺寸大小是绝对的，可理解为显示器的两个像素点之间的距离。

• 设备分辨率 屏长的设备像素_屏宽的设备像素 可理解为横向屏幕像素点数_竖向屏幕像素点数

• dpi(dots per inch) 像素密度，表示水平或垂直方向没英寸长度的像素数目

• ppi(pixels per inch) 像素密度，表示沿对角线每英寸长度的像素数目

• 设备像素比 可通过window.devicePixelRatio获得

• 设备独立像素 即css的px像素，为一个抽象概念。又叫逻辑像素。 > 分辨率=设备尺寸_像素密度 > 逻辑像素（px）=设备像素_设备像素比 设备像素为绝对尺寸，设屏幕宽度为1，则设备像素为1/设备分辨率，以上逻辑像素计算可转化为： > 1/横向逻辑像素=1/横向设备分辨率*设备像素比 所以，逻辑像素与设备分辨率与设备像素比有关。

设备分辨率为绝对参数，设备像素比又由什么决定的呢？ 随着科技的发展，屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍。高清屏幕带来的问题就是设备像素愈来愈小，如果没有缩放，网页内容会看起来非常小。 在PC端缩放比例为自定义的，一般是单位逻辑像素=单位设备像素。 对移动端来说，缩放比例的确定还要根据viewport来确定。现在为理解viewport，插入视口的概念。

视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。 而移动端则较为复杂，它涉及到三个视口：布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）。 移动端为了让网页正常显示，分为布局视口与视觉视口两个独立概念，布局视口即网页内容绘制的区域，默认为980px，视觉视口即设备视口。 为了统一规范，乔布斯提出了理想视口的概念，即布局视口=视觉视口，通过viewport去设置

在非理想视口的情况，逻辑像素与设备像素无关（待补充） 理想视口，即视口为设备视口，此时的逻辑像素与缩放比例有关，经过实践检验，1px=屏幕宽度的1/375，比较符合PC端的感受，根据iPhone6，放大比例为2即326:2

参考 像素（px）到底绝对单位还是相对单位 css尺寸单位认知