学习前端第十五天（响应式布局，媒体查询）

1、根据媒体特性查询

      @media  （设备）{样式}

      screen  print    屏幕；打印

      max-width  min-width    页面可见宽度小于等于某个值；大于等于某个值

      orientation：portrait；landscape   横屏；竖屏

2、逻辑操作符

      and；not；only

      @media screen and (max-width:900px) {}

      @media screen not (orientation:portrait) {}

      @media  only  screen {}

3、通过文件引入设置媒体查询

      <link rel="stylesheet" media="(orientation:portrait)" href="./css/3.css">

4、通过 style 设置媒体查询

      <style media="(orientation:portrait)">   </style>

5、12（24、48）栅格布局

    display: flex;

    flex-wrap: wrap;

    .col {

           @for $num from 1 to 13（25、49）

            {&.col-#{$num} {flex: 0 0 ($num / 12（24、48） * 100%)}

         }

6、垂直方向对齐（在class里面加上ow-y-#{$place}就好）

    @each $place in (flex-start, flex-end, center, stretch, baseline)

    {

        &.row-y-#{$place} {align-items: $place;}

    }

7、水平方向对齐（在class里面加上row-x-#{$place}就好）

    @each $place in (flex-start, flex-end, center, space-between, space-around, space-evenly)

   {

        &.row-x-#{$place} {justify-content: $place;}

    }

8、媒体查询，移动设备优先

 @media only screen and (max-width:600px)

     {  @for $num from 1 to 13 {

                &.col-xs-#{$num}

           {flex: 0 0 ($num / 12 * 100%)}

            }

       }

        @media only screen and (min-width:600px) {

            @for $num from 1 to 13 {

                &.col-sm-#{$num} {

                    flex: 0 0 ($num / 12 * 100%)

                }

            }

        }

        @media only screen and (min-width:980px) {

            @for $num from 1 to 13 {

                &.col-lg-#{$num} {

                    flex: 0 0 ($num / 12 * 100%)

                }

            }

        }