CSS3物理与逻辑像素 flex

1、物理像素

设备像素，在同一个设备上，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。

2、逻辑像素
CSS像素，viewport中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px960px，而逻辑像素数为320480px。因此，需要使用大约4个物理像素来显示一个CSS像素。

3.像素比
物理像素与逻辑像素之间比例。当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素显示1个逻辑像素。

4.Retina
所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。简单理解为种新型高分辨率的显示标准。

5、实现真正的1物理像素
当viewport的属性initial-scale为1时，页面大小正常，但initial-scale为0.5时，页面被缩小了1倍，像素比为2:1的设备本来1个CSS像素宽度占2个物理像素宽度，缩小后的1个CSS像素宽度就只占1个物理像素，即实现了真正的1物理像素。

6.flex容器属性
①弹性盒模型display:flex;
②元素的排列方向flex-direction:row（默认值） | row-reverse | column |column-reverse
③元素是否换行flex-wrap:nowrap（默认值） | wrap | wrap-reverse
④项目元素在主轴上的对齐方式justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly
⑤元素在交叉轴的对齐方式align-items:stretch（默认值） | center | flex-end | baseline | flex-start
⑥多行元素在交叉轴的对齐方式align-content:stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly