物理与逻辑像素and弹性盒技术

浅谈物理与逻辑像素

1、移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等
2、屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、vw、vh等
3‘、例

弹性盒

语法
flex-direction: row | row-reverse | column | column-reverse
语法
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式
4、块元素垂直居中问题采用 flex 解决。

行内元素垂直居中问题解决如下：

1）单行

该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。

2）多行

设置该元素 css 属性：display: table-cell; vertical-align: middle;，还需设置该元素的父级元素 css 属性：display: table;。

使用弹性盒子，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}