媒体查询_flex布局_栅格系统

1.flex

• 一个容器设置了display:flex;属性就定义了一个flex容器，它的直接子元素会接受这个flex环境
  .container { display: flex; }

• 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

• flex兼容性如下图:
  缺点:支持该属性的浏览器版本并不多.

  
  image.png

flex参考

2.媒体查询

常用的媒体类型有:

1. all（所有），适用于所有设备。
2. handheld（手持），用于手持设备。
3. print（印刷），用于分页材料以及打印预览模式下在屏幕上的文档视图。
4. projection（投影），用于投影演示文稿，例如投影仪。
5. screen（屏幕） ，主要用于计算机屏幕。
   在使用的时候可以在样式表直接书写 @media指令+空格+媒体类型（多个逗号隔开）

有以下常用的media feature

width：浏览器宽度

height：浏览器高度

device-width：设备屏幕分辨率的宽度值

device-height：设备屏幕分辨率的高度值

orientation：浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape

如何引入media:有两种常用的引入方式

• link方法引入

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

• @media引入

@media screen and (min-width: 600px) and (max-width: 800px){
    选择器{
        属性：属性值；
    }
}

CSS2:
@media print {
   body { font-size: 10pt }
 }
 @media screen {
   body { font-size: 13px }parsing-errors
 }
 @media screen, print {
   body { line-height: 1.2 }
 }

CSS3:
@media screen and (max-width: 990px){
    .container{
        background: orange;
    }
}

3.用媒体查询实现如下要求

1. 在页面宽度> 1200px 时页面背景为红色 
2. 在页面1200px>=宽度> 900px  时页面背景为绿色
3. 在页面900px>=宽度> 600px  时页面背景为黄色
4. 宽度<=600px 背景为灰色

代码预览

4.实现一个简单的栅格系统

代码预览