响应式

单位

px(Pixel): 相对长度单位，最常用（浏览器的默认字体高度16px）。
em: 相对长度单位，相对于父元素，不常用。
rem: 相对长度单位，相对于根元素，常用于响应式布局。 pt(Point): 绝对长度单位，物理像素单位。
vh: 相对于视口的高度单位。 vw: 相对于视口的宽度单位。

换算

任意浏览器的默认字体高度16px（16像素）。

所有未经调整的浏览器都符合: 16px=1em。
12px=0.75em, 10px=0.625em。

1pt = 1/72(inch),inch及英寸，而1英寸等于2.54厘米。
pt 和 px 的转换规则，转换公式：pt=px*3/4。比如 1024px*3/4=768pt 大小。

为了简化font-size的换算，可以在body选择器中声明font-size=62.5%，
这就使rem值变为 16px*62.5%=10px，这样12px=1.2rem, 10px=1rem，
也就是说只需要将你的原来的px数值除以10，然后换上rem作为单位就行了。

window.innerHeight === 100vh window.innerWidth === 100vw

1vh = 网页视口高度的1/100。
1vw = 网页视口宽度的1/100。
vmin：当前vw和vh中较小的一个值。
vmax：当前vw和vh中较大的一个值。
vmin、vmax的作用：在做移动端页面开发时，会使得文字大小在横竖屏下保持一致。

响应式布局的常用方案 rem

屏幕密度比：

将高密度屏幕的多个设备像素当作1个像素使用

自适应：

由于各大厂商的分辨率多种多样，为了统一体验效果，使用rem/vw/vh等自适应单位。

media-query，根据不同的屏幕宽度设置根元素font-size

弊端：

"阶梯"性

@media only screen and (max-width: 374px) {
  /* iphone5或者更小的尺寸，以 iphone5的宽度(320px)比例设置
font-size */
  html {
    font-size: 86px;
  }
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
  /*iphone6/7/8和iphone x*/
  html {
    font-size: 100px;
  }
}
@media only screen and (min-width: 414px) {
  /* iphone6p或者更大的尺寸，以 iphone6p 的宽度(414px)比例设置 font-size */
  html {
    font-size: 110px;
  }
}

CSS像素和物理像素

css像素（逻辑像素dip）

CSS像素又称为逻辑像素，虚拟像素，也称为直觉像素。
CSS像素所使用的单位是px。是一个相对单位。

屏幕显示是由一个一个不连续的点组成，最小组成单位为物理像素。而在现实生活中，人肉眼看到的是一系列连续的图形，因此采用CSS像素来进行衡量。

它也被称为设备的独立像素，是web前端开发者构造的，他不是实际存在的，
在css和javascript中使用的一个抽象的层，
每一个css声明和几乎所有的javascript属性都使用css像素，

CSS像素是个相对单位，1px等于几个物理像素。
包含的越多屏幕上看的越清晰。

物理像素

他也被称为设备像素，他是屏幕的物理单位，他是现实中实际存在的，
任何带有屏幕的设备都是有像素组成的，他的像素是在出厂的时候是已经设置好的。

在iOS设备上，`screen.width`的值为dip
在安卓以及Windows Phone设备上，`screen.width`的值为物理像素

设备像素比（DPR）

设备像素比 dpr ，全名device pixel ratio ，即物理像素与逻辑的像素的比

window.devicePixelRatio指的是设备物理像与逻辑的像素的比

DPR = 物理像素(设备像素) / 逻辑像素(CSS像素)

像素密度（屏幕密度PPI）

每单位英寸上像素的数量，PPI的值越高，表示一定尺寸的屏幕上像素数量越多，也即同一尺寸下，  
PPI增加了N倍，物理像素会增加n2倍，同时每个物理像素的大小会缩小1/n2倍。

PPI = 根号下 (x2+y2)/ 屏幕尺寸 其中x*y为屏幕分辨率

单位为inch（英寸），是一个长度单位，且1 inch = 2.54cm

设备	逻辑像素(px)	设备物理像素	设备像素比(DPR)	屏幕尺寸(英寸)	屏幕密度(PPI)
iphone 4	320*480	640*960	2	3.5	326
iphone 6	375*667	750*1334	2	4.7	326

ref：
移动端web页面知识小结之像素、物理像素、逻辑像素open in new window

# 响应式

# 单位

# 换算

# 响应式布局的常用方案 rem

# CSS像素和物理像素

响应式

单位

换算

响应式布局的常用方案 rem

CSS像素和物理像素