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

96
好奇而已
2017.07.08 21:06* 字数 290

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.实现一个简单的栅格系统

代码预览

JavaScript
Web note ad 1