css像素px，物理像素（pt），设备像素比（dpr），1px边框问题，viewport自适应

关于 css像素px，物理像素（pt），设备像素比（dpr），1px边框问题，viewport自适应等问题。

目录

关于 css像素px，物理像素（pt），设备像素比（dpr），1px边框问题，viewport自适应等问题。 @[TOC](目录)
css像素
物理像素（pt）
CSS像素（px）和物理像素（pt）
CSS 像素（CSS Pixel）:
设备像素（Device Pixels）:
设备像素比（DevicePixelRatio）:DPR = 设备像素 / CSS 像素

像素的物理（物理像素）和逻辑（CSS像素）之分:
==1px边框问题==
1px边框问题解决方式：

em
rem
rpx

viewport
3个viewport
用meta标签对viewport进行控制

css像素

1、PX(CSS pixels)（CSS像素）

CSS 像素（CSS Pixel）:
又称为虚拟像素、设备独立像素或逻辑像素，也可以理解为直觉像素。CSS 像素是 Web 编程的概念，指的是 CSS 样式代码中使用的逻辑像素。

虚拟像素，可以理解为“直觉”像素，CSS和JS使用的抽象单位，浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是px。

在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。

在同样一个设备上，每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第一方面的相对性);
在不同的设备之间，每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第二方面的相对性);

px实际是pixel（像素）的缩写，它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。

例子：
假设打开一个浏览器，浏览器窗口宽度为800px,浏览器显示一个400px的正方形。如果我们把页面放大（通过“Ctrl键”加上“+号键”），放大为200%，也就是原来的两倍。此时正方形则横向占满了整个浏览器。此时我们既没有调整浏览器窗口大小，也没有改变块状元素的css宽度，但是它看上去却变大了一倍——这是因为我们把CSS像素放大为了原来的两倍。
也就是说默认情况下一个CSS像素应该是等于一个物理像素的宽度的，但是浏览器的放大操作让一个CSS像素等于了两个设备像素宽度。在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。

从上面的例子可以看出，CSS像素从来都只是一个相对值。

物理像素（pt）

设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。
pt在css单位中属于真正的绝对单位，1pt = 1/72(inch),inch及英寸，而1英寸等于2.54厘米。

通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。==只不过现在液晶显示器成为主流，由于液晶的显示原理与CRT不同，只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳，所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。

CSS像素（px）和物理像素（pt）

CSS 像素（CSS Pixel）:

又称为虚拟像素、设备独立像素或逻辑像素，也可以理解为直觉像素。CSS 像素是 Web 编程的概念，指的是 CSS 样式代码中使用的逻辑像素。比如 iPhone 6 的 CSS 像素数为 375 x 667px。

设备像素（Device Pixels）:

又称为物理像素。指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了。比如 iPhone 6 的分辨率为 750 x 1334px

设备像素比（DevicePixelRatio）:DPR = 设备像素 / CSS 像素

这里的 CSS 像素其实是理想视口
例如，iPhone 6 物理像素为 750 x 1334，理想视口 375 x 667 ，DPR = 2

像素的物理（物理像素）和逻辑（CSS像素）之分:

设备像素比（Device Pixel Ratio，DPR）：一个设备的物理像素与逻辑像素之比。

其实在很久以前，的确是没区别的，CSS里写个1px，屏幕就给你渲染成1个实际的像素点，DPR=1，多么简单自然~
后来苹果公司为其产品mac、iPhone以及iPad的屏幕配置了Retina高清屏，也就是说这种屏幕拥有的物理像素点数比非高清屏多4倍甚至更多。如果还按照DPR=1进行展示，那么同一张图片在高清屏上面显示的区域面积会是非高清屏的1/4，这样的话由于图片在屏幕上的展示面积大大缩小，也会导致出现“看不清”的问题。
苹果公司既然推出了Retina技术，那么这种技术带来了高清展示福利的前提下也要解决“DPR=1”的问题。怎么解决呢？DPR!=1。苹果公司经过一系列技术使用4个乃至更多物理像素来渲染1个逻辑像素，这样一来，同样的CSS代码设置的尺寸，在Retina和非Retina屏幕上看起来大小是一样的，但在Retina屏幕上要精细得多。

在Retian屏上，DPR不再是1，而是大于1，比如2（iPhone 5 6 7 8）或3（iPhone 6 Plus等一系列Plus）或者为非整数（一些Android机），说不定还会涨。

举个例子，iPhone 6的物理像素上面已经说了，是750 * 1334，那它的逻辑像素呢？我们只需在iPhone 6的Safari里打印一下screen.width和screen.height就知道了，结果是 375 * 667，这就是它的逻辑像素，据此很容易计算出DRP为2。当然，我们还可以直接通过window.devicePixelRatio这个值来获取DRP，打印结果是2，符合我们的预期。

1px边框问题

产生：简单说，苹果公司采取了Retina技术，设置设备像素比，使其使用4个乃至更多物理像素来渲染1个逻辑像素，大多数公司效仿，
DPR不再是一比一。
在苹果的带动下，Retina技术在移动设备上已经成了标配，所以前端攻城狮必须直面如下事实

1. 你想画个1px的下边框，但屏幕硬是显示一条宽度为2—3个物理像素的线。
2. 你没法像安卓或iOS的同事那样直接操纵物理像素点。

1px边框问题解决方式：

border-image 图片
background-image 渐变
box-shadow 等
比较好：https://segmentfault.com/a/1190000015736900

伪元素+transform”对边框进行缩放；
用JS根据屏幕尺寸和dpr精确地设置不同屏幕所应有的rem基准值和initial-scale缩放值。

em

相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

由于浏览器的默认字体大小是 16px，所以未经调整默认字体大小的浏览器都符合: 1em = 16px。

em 会继承父级元素的字体大小。由此，只需要改变父元素的字体大小，就可以同步放大或缩小子元素的字体。

但是也因此需要注意几点：
1、body 选择器中声明 Font-size=62.5% (10 ÷ 16 × 100% = 62.5%)；
2、将你的原来的 px 数值除以 10，然后换上 em 作为单位；
3、重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明。

rem

由于 em 存在对父元素继承的问题，当改变字体大小时涉及的继承关系就变得复杂起来。

rem 是相对于根元素字体尺寸的大小。如文本大小设为 font-size: 10px，则 1rem = 10px。使用 rem 设置字体则简单了很多。

rpx

微信小程序引入rpx（responsive pixel）这个新的尺寸单位

小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。

举个例子：iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx = 375 / 750 px = 0.5px。

viewport

移动设备上的viewport是设备屏幕上用来显示网页的那部分区域，再具体一点就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。默认情况下，移动设备上的viewport都是大于浏览器可视区域的，这是因为移动设备的分辨率相对于PC来说都比较小，所以为了能在移动设备上正常显示那些为PC浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，由设备本身决定），但后果是浏览器出现横向滚动条，因为浏览器可视区域的宽度比默认的viewport的宽度小。

3个viewport

layout viewport——布局视窗

如果把移动设备上浏览器的可视区域设为viewport的话，某些网站会因为viewport太窄而显示错乱，所以这些浏览器就默认会把viewport设为一个较宽的值，比如980px，使得即使是那些为PC浏览器设计的网站也能在移动设备浏览器上正常显示。这个浏览器默认的viewport叫做 layout viewport。layout viewport的宽度可以通过 document.documentElement.clientWidth来获取。

visual viewport ——视觉视窗

layout viewport的宽度是大于浏览器可视区域的宽度的，所以还需要一个viewport来代表浏览器可视区域的大小，这个viewport叫做 visual viewport。visual viewport的宽度可以通过 document.documentElement.innerWidth来获取。

ideal viewport—— 理想视窗

ideal viewport是一个能完美适配移动设备的viewport。首先，不需要缩放和横向滚动条就能正常查看网站的所有内容；其次，显示的文字、图片大小合适，如16px的文字不会因为在一个高密度像素的屏幕里显示得太小而无法看清，无论是在何种密度屏幕，何种分辨率下，显示出来的大小都差不多。这个viewport叫做 ideal viewport。

ideal viewport并没有一个固定的尺寸，不同的设备有不同的ideal viewport。

ideal viewport 的意义在于，无论在何种分辨率的屏幕下，针对ideal viewport 而设计的网站，不需要缩放和横向滚动条都可以完美地呈现给用户。

用meta标签对viewport进行控制

移动设备默认的viewport是layout viewport，，但在进行移动设备网站的开发时，需要的是ideal viewport。要得到ideal viewport，需要用到meta标签。

head标签中加入：
viewport设置移动端自适应的方法：

<meta name="viewport" content="width=device-width, initial-scale=1">

该meta标签的作用是让当前viewport的宽度等于设备的宽度。device-width指的是设备的物理宽度，width是页面宽度
meta viewport 的6个属性：

width: viewport宽度
height: viewport高度
initial-scale: 初始缩放比例maximum-scale: 最大缩放比例
minimum-scale: 最小缩放比例
user-scalable: 是否允许用户缩放

在这里插入图片描述
要把当前的viewport宽度设为ideal viewport的宽度，既可以设置width=device-width，也可以设置initial-scale=1，但有一个小缺陷，就是width=device-width会导致iphone、ipad横竖屏不分，initial-scale=1会导致IE横竖屏不分，都以竖屏的ideal viewport宽度为准。所以，最完美的写法两者都写上去，== initial-scale=1 解决 iphone、ipad的缺陷，width=device-width解决IE的缺陷。==