CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)

2024-07-11 08:28:44

字体：大中小

来源：转载

供稿：网友

Media Queries这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。
首先来看一个简单的实例：

复制代码

代码如下:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容：
1、screen：这个不用说大家都知道，指的是一种媒体类型；
2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；
3、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。
为了更能理解Media Query，我们在次回到前面的实例上：转换成css中的写法为：

复制代码

代码如下:
@media screen and (max-width: 600px) {
选择器 {
属性：属性值；
}
}

其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){…}的大括号之中。在语句上面的语句结构中，可以看出Media query和css的属性集合很相似，主要区别在：
1、Media query只接受单个的逻辑表达式作为其值，或者没有值；
2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式；
3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况
4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种

下面我们一起来看看Media Queries的具体使用方式
一、最大宽度Max Width

复制代码

代码如下:
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />

上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。
二、多个Media Queries使用

复制代码

代码如下:
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

Media Query可以结合多个媒体查询，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。
三、设备屏幕的输出宽度Device Width

复制代码

代码如下:

上一篇：li样式不显示使用overflow:hidden导致Li前面点、圈等样式不见

下一篇：怎样使div中的文字在div的底部显示实现样式