霍者博客

CSS3 Media Queries 实现响应式设计

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

一、页面中引入媒体类型方法也有多种

1.link方法引入

<link rel="stylesheet" media="screen and (max-width: 600px)" href="sytle1.css" />

在屏幕最大是600px的时候加载“sytle1.css”

2、@import 方式引用,这种方式的引用,要在style中,写法如下:

<style type="text/css" media="screen">
    @import url("css/style.css");
</style>

或者:

<style type="text/css" media="screen and (max-width: 600px)">
    @import url("css/style.css");
</style>

3、第三种方法,也是我很喜欢用的,也就是下面的这种方法:

@media screen and (max-width: 600px) {
    选择器 {
        属性:属性值;
    }
}

二、Media Queries的具体使用方式

1、最大宽度Max Width

下面表示的是:当屏幕小于或等于600px时,将采用style2.css样式来渲染Web页面。

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

2、最小宽度Min Width

下面的样式会在可视区域的宽度大于 900px 的时候被应用。

@media screen and (min-width: 900px) {
    .class {
          background: #666;
    }
}

3、多个Media Queries使用

你还可以使用过个匹配条件,下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
       background: #333;
  }
}

4、设备屏幕的输出宽度Device Width

下面的样式会在 max-device-width 是 480px 的设备上触发。(提示:max-device-width 是设备的实际分辨率,而 max-width 指的是可视区域分辨率。

@media screen and (max-device-width: 480px) {
  .class {
      background: #000;
  }
}

5、iPad

在大数情况下,移动设备iPad上的Safari和在iPhone上的是相同的,只是他们不同之处是iPad声明了不同的方向,比如说下面的例子,在纵向(portrait)时采用portrait.css来渲染页面;在横向(landscape)时采用landscape.css来渲染页面。

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />

6、关键字(not、only)

not关键字是用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备。如下:

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

only用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only而不是screen;另外不支持Media Qqueries的浏览器,不论是否支持only,样式都不会被采用。如下:

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

7、其他

在Media Query中如果没有明确指定Media Type,那么其默认为all,如:

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

另外还有使用逗号(,)被用来表示并列或者表示或,如下:

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/508.html,标题:CSS3 Media Queries 实现响应式设计

【我来说两句】
分享到:

评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。