CSS3 媒体查询与CSS3 弹性盒

CSS3 媒体查询

概述

• media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对==不同的设备指定特定的样式==，从而实现更丰富的界面。 media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一

• 多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。 如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果

语法

样式表内引入媒体查询

• 语法示例： @media 媒体类型 and|not|only (媒体特性表达式) {   CSS-Code; }

• 媒体类型(media type)

  • all所有设备； screen 用于电脑屏幕，平板电脑，智能手机等； print 用于打印机和打印预览； speech 应用于屏幕阅读器等发声设备

  • （以screen和print为例）

• 设备特性(media feature)

  • width视口宽度；height视口高度； device-width设备宽度、device-height高度； orientation浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape；

  • （以上逐个）

• 操作符

  • and(与、和) not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备) only: 用来定某种特别的媒体类型。

  • （以上逐个）

在不同的媒体上使用不同的样式文件

• 语法：

• 逻辑值

  <link rel="stylesheet" media="screen and (max-width:1200px)" href="mystylesheet.css"> 意思：在屏幕小于1200px以下的时候就引入该样式表！！！ 

  ==现在很少这样使用了 大部分的使用情况就是上课案例那样！！==

  设备的划分

  大屏设备  width大于1200px (pc