_CSS3

1 弹性盒子布局(flex)

css3 中引入的一个非常灵活，非常强大的布局方式。

#container {
    display: flex;
    justify-content: center;
}

.item {
    flex: 1;
}

2 媒体查询(Media Query)

2.1 @import

2.2 @media

语法分为三部分:

Media 类型
Media 特性表达式
逻辑操作符

如下所示:

/* 语法 */
@media not|only MediaType and (MediaFeatureExpressions) {
    CSS-Code;
}

/* 示例 */
@media print {
    /* 只有在打印的时候，这些样式才会生效 */
}

@media screen, print {
    /* Media Type 分为4种，all/print/screen/speech */
}

@media screen and (min-width: 480px) {
    /* 显示的时候，并且屏幕宽度大于 480 的时候才生效 */
}

@media (min-height: 500px), (not (screen and ((color))) and (max-width: 90em) and (oritentation:lanscape)) {
    /* 更复杂的条件 */
    /* 逻辑运算符包括 and/not/only */
}