前端资源大全

CSS3 Media Queries 学习笔记

2016-12-21  本文已影响28人  专职跑龙套

CSS2 引入 媒体类型 Media Types

CSS2 引入了 @media 规则,目的是给不同的 媒体类型 media types 定义不同的 样式规则 style rules
不过 Media Types 并没有被设备支持。

CSS3 引入 媒体类型 Media Queries

Media queries in CSS3 extend the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.
Media Queries 扩展了 media types,所不同的是,它查询设备的兼容性,而不是设备的类型。

Media queries 可以用来查询:

Media Query 语法

如下的代码中,当 mediatype 匹配当前设备并且所有的表达式 expressions 都为 true 时,该 Media Query 返回 true,并且大括号中的 CSS-Code 会对当前页面生效。
其中,mediatype 可以为空,为空时,表示匹配任何的设备。

@media not|only mediatype and (expressions) 
{
  CSS-Code;
}

对于 mediatype,可以有如下的选项:

具体的使用示例如下:
默认的背景色为 pink,当屏幕宽度大于 480px 时,背景色设为 lightgreen。

body {
    background-color: pink;
}

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

我们也可以根据 Media Queries 加载不同的 CSS 文件,语法如下:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

具体的使用示例如下:
当屏幕宽度小于 400px 时候,加载 tinyScreen.css。
当屏幕宽度在 400px 到 600px 之间时,加载 smallScreen.css。

<link rel="stylesheet" type="text/css"    media="screen and (max-device-width: 400px)"    href="tinyScreen.css" />

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

引用:
CSS3 Media Queries

上一篇 下一篇

猜你喜欢

热点阅读