什么是媒体查询（media queries）

为不同尺寸的屏幕设定不同的css样式。

• 在移动端中使用的频率比较高，不同手机尺寸各不相同且变化比较大
• 在web端使用的频率不高，因为电脑显示器屏幕尺寸变化不大

@media常用参数

使用方法

// 1行3个div
 @media screen and (min-device-width:800px) {
         .div div {
             width: 33.3%;
         }
 }
// 1行2个div
 @media screen and (min-device-width:400px) and (max-device-width:799px) {
            .div div {
                width: 50%;
            }
 }
 //1行1个div
 @media screen and (min-device-width:100px) and (max-device-width:399px) {
             .div div {
                width: 100%;
         }
 }

媒体查询引入方式

内部样式表-style标签引入

写在style标签中，有条件的执行某个内部样式表

<style media=""><style>

<style media="(min-device-width:800px)">
        .div div {
            width: 33.3%;
        }
</style>
<style media="(min-device-width:400px) and (max-device-width:799px) ">
        .div div {
            width: 50%;
        }
</style>
<style media="(min-device-width:100px) and (max-device-width:399px)">
        .div div {
            width: 100%;
        }
</style>

外部样式表-link引入

写在link标签中，有条件的引入外部样式表

<link href="样式表路径1" rel="stylesheet" media="(min-device-width:800px)">
<link href="样式表路径2" rel="stylesheet" media="(min-device-width:400px) and (max-device-width:799px)">
<link href="样式表路径3" rel="stylesheet" media="(min-device-width:100px) and (max-device-width:399px)">

flex弹性布局

什么是flex

flexiableBox即弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题

为什么用flex

• 为盒装模型提供最大的灵活性
• 更符合响应式设计的特点

flex基础概念

• flex容器（flex container）
• flex项目（flex item）
• 主轴（main axis）
  • flex item水平排列时，水平x轴为主轴
  • flex item垂直排列时，竖直y轴为轴
• 交叉轴（cross axis）
  • 与主轴垂直的轴
• 占用主轴空间（main size）
• 占用交叉轴空间（cross size）
• 线轴起止点（main start、main end、cross start、cross end）

注意：如果flex container容器总宽度小于flex item宽度总和，则flex item会被压缩。若允许换行（flex-wrap），就不会被压缩了

属性

flex-direction

子元素父元素盒子中的排列方式。在父元素中设置

flex-wrap

子元素在父元素盒子中是否换行（列）。在父元素中设置

flex-flow

flex-direction和flex-wrap的简写方式

flex-flow：<flex-direction> || <flex-wrap>

flex-flow : row wrap;

justify-content

存在剩余空间时（即flex item 没有占满flex container时），设置flex item及与父边框的间距的方式。在父元素中设置

align-items

设置每个flex元素在交叉轴上的默认对齐方式。以每行flex元素为一个整体排列。在父元素中设置

align-content

和align-items相似，设置每个flex元素在交叉轴上的默认对齐方式。但是以所有多行flex元素为一个整体对齐。需要结合height属性使用，在父元素中设置。

属性值和justify-content基本相同

其他属性

为子元素设置的属性

特殊写法