CSS记录

1. 设备像素比

iphone3的分辨率为320x480，1个css像素等于一个屏幕物理像素

iphone4的分辨率为640x960（苹果公司便推出了所谓的Retina屏），分辨率提高了一倍，导致同样大的屏幕上像素多了一倍，安卓设备上分为ldpi、mdpi、hdpi、xhdpi等不同的等级

window对象有一个devicePixelRatio属性，官方定义为：设备物理像素和设备独立像素的比例，即 devicePixelRatio = 物理像素 / 独立像素

在Retina屏的iphone上，devicePixelRatio的值为2，即1个css像素相当于2个物理像素

苹果的iphone6是2倍图，一般写代码时量完尺寸都要除以2

2. 视口

手机端比较窄，若把PC端的网页直接放在移动端会无法完全显示，出现滚动条且字体较大，可以对viewport(视口)进行设置，把网页缩放在这个视口里，使其在移动端正常显示。

一般写移动端或响应式时会加上如下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

快捷键：meta:vp+tab键

3. rem和em的区别

rem 的参照点是html根元素

em 的参照点是定义了字体的父元素（不推荐）

1em=16px  0.75em=12px

4. 媒体查询

@media screen and (max-768px){
    body{
        100%;
        height:100%;
        background-color:red;
    }
}
@media screen and (min-768px) and (max-1200px){
    body{
        100%;
        height:100%;
        background-color:green;
    }
}
@media screen and (min-1200px){
    body{
        100%;
        height:100%;
        background-color:yellow;
    }
}

5. 伸缩布局

给父元素设置伸缩盒子 display:flex

给父元素设置justify-content来调整主轴方向子元素的对齐方式  有flex-start flex-content center space-around 和space-between等属性

给父元素设置align-items来调整侧轴方向子元素的对齐方式  有flex-start flex-content center stretch等属性

flex是设置子元素在伸缩盒子的父元素里面占据的份数

order是设置子元素在伸缩盒子的父元素里面的排序

flex-direction是调整主轴和侧轴的方向 默认是row 可以改成column

align-self是设置特殊子元素的排序方式