欢迎莅临阿Q的项目

专业WP商业设计开发销售中心

CSS3 Media Queries 详解

Media Queries 的引入,其作用就是允许添加表达式用以确定媒体的情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不 同的设备,以此加强体验。

媒体特性共13种,可以说是一个类似CSS属性的集合。但和CSS属性不同的是,媒体特性只接受单个的逻辑表达式作为其值,或者没有值。并且其中的大部分接受 min/max 的前缀,用来表示 大于等于/小于等于 的逻辑,以此避免使用 < 和 > 这些字符。

Media Query

那么,回到刚才的那条Media Query,media="screen and (min-width: 400px)" 的意思就是当屏幕的宽度大于等于400px的时候,应用此条CSS。

一个 Media Query 包含一种媒体类型,如果媒体类型没有指定,那么就是默认类型all,比如:

代码:

<link rel="stylesheet" type="text/css" href="example.css"
 media="(max-width: 600px)">

一个 Media Query 包含0到多个表达式,表达式又包含0到多个关键字,以及一种媒体特性,比如:

代码:

<link rel="stylesheet" type="text/css" href="example.css"
 media="handheld and (min-width:20em) and (max-width:50em)">

逗号(,)被用来表示并列,表示或者。比如下面的例子表示此CSS被应用于宽度小于20em的手持,或者宽度小于30em的屏幕:

代码:

<link rel="stylesheet" type="text/css" href="example.css"
 media="handheld and (max-width:20em), screen and (max-width:30em)">

not 关键字用来排除符合表达式的设备,比如:

代码:

<link rel="stylesheet" type="text/css" href="example.css"
 media="not screen and (color)">
如果喜欢本文,请分享给朋友们