媒体查询介绍

我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。

先看一个简单的例子:

 <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 Type)和 媒体特性(Media Query),首先一起来理解一下这两个概念:

媒体类型(Media Type)在css2中是一个常见的属性,也是一个非常有用的属性,可以通过媒体类型对不同的设备指定不同的样式,在css2中我们常碰到的就是all(全部),screen(屏幕),print(页面打印或打邱预览模式),其实在媒体类型不止这三种,w3c总共列出了10种媒体类型。

媒体特性Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则),为了更能理解Media Query,我们在次回到前面的实例上:

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

转换成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 Query如下表所示:

兼容的浏览器:

Media Queries具体使用

下面我们一起来看看Media Queries的具体使用方式

一、最大宽度Max Width

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

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

二、最小宽度Min Width

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

三、多个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

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

上面的代码指的是iphone.css样式适用于最大设备宽度为480px,比如说iPhone上的显示,这里的max-device-width所指的是设备的实际分辨率,也就是指可视面积分辨率

五、iPhone4

 <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

上面的样式是专门针对iPhone4的移动设备写的。

六、iPad

<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" />

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

七、android

/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

我们可以使用media query为android手机在不同分辨率提供特定样式,这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。

八、not关键字

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

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

九、only关键字

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

only用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。

其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。

其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only而不是screen;另外不支持Media Qqueries的浏览器,不论是否支持only,样式都不会被采用。

十、其他

在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" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

上面代码中style.css样式被用在宽度小于或等于480px的手持设备上,或者被用于屏幕宽度大于或等于960px的设备上。

下面具体讲解过程:

准备工作1:设置Meta标签

首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这段代码的几个参数解释:

  • width = device-width:宽度等于当前设备的宽度

  • initial-scale:初始的缩放比例(默认设置为1.0)

  • minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)

  • maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)

  • user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)

准备工作2:加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 Media,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

准备工作3:设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)

现在有很多人的IE浏览器都升级到IE9以上了,所以这个时候就有又很多诡异的事情发生了,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8:

为了防止这种情况,我们需要下面这段代码来让IE的文档模式永远都是最新的:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

不过又有一个更给力的写法:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

怎么这段代码后面加了一个chrome=1,这个Google Chrome Frame(谷歌内嵌浏览器框架GCF),如果有的用户电脑里面装了这个chrome的插件,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,无比给力,不过如果用户没装这个插件,那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上,不过不用也是可以的。

进入CSS3 Media

一般写法:
@media screen and (max-width: 960px){
body{
background: #000;
}
}
应该有人会发现上面这段代码里面有个screen,他的意思是在告知设备在打印页面时使用衬线字体,在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时,你可以直接这样写:
@media (max-width: 960px){
body{
background: #000;
}
}
其中css2的媒体查询:

<link rel="stylesheet" type="text/css" media="screen" href="style.css">
我们想知道移动设备是不是纵向放置的显示屏,可以这样写:
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">
我们把第一段的代码也用CSS2来实现,让它一样可以让页面宽度小于960的执行指定的样式文件:
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">
但是上面这个方法,最大的弊端是他会增加页面http的请求次数,增加了页面负担,我们用CSS3把样式都写在一个文件里面才是最佳的方法。
 
下面的写法是实现尺寸等于480px:
@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){

//自己添加的样式

}

其中对于-webkit-min-device-pixel-ratio作如下解释:

-webkit-min-device-pixel-ratio为1.0:
  • 1.所有非Retina的Mac
  • 2.所有非Retina的iOS设备
  • 3.Acer Iconia A500
  • 4.Samsung Galaxy Tab 10.1
  • 5.Samsung Galaxy S

-webkit-min-device-pixel-ratio为1.3:

  • 1. Google Nexus 7

-webkit-min-device-pixel-ratio为1.5:

  • 1.Google Nexus S
  • 2.Samsung Galaxy S II
  • 3.HTC Desire
  • 4.HTC Desire HD
  • 5.HTC Incredible S
  • 6.HTC Velocity
  • 7.HTC Sensation
-webkit-min-device-pixel-ratio为2.0:
  • 1.iPhone 4
  • 2.iPhone 4S
  • 3.iPhone 5
  • 4.iPad (3rd generation)
  • 5.iPad 4
  • 6.所有Retina displays 的MAC
  • 7.Google Galaxy Nexus
  • 8.Google Nexus 4
  • 9.Google Nexus 10
  • 10.Samsung Galaxy S III
  • 11.Samsung Galaxy Note II
  • 12.Sony Xperia S
  • 13.HTC One X

媒体查询之device-aspect-ratio

说明:本文档兼容性测试基础环境为:windows系统;IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

语法:device-aspect-ratio:<ratio>
取值:<ratio>:指定比率
说明: 定义输出设备的屏幕可见宽度与高度的比率。

  • 如常讲的显示器屏幕比率:4/316/916/10
  • 本特性接受min和max前缀,因此可以派生出min-device-aspect-ratiomax-device-aspect-ratio两个媒体特性。

一般例子:

@media screen and (device-aspect-ratio:4/3){ … }
@import url(example.css) screen and (min-device-aspect-ratio:4/3);

版本支持:IE9以及以上的浏览器开始支持

例子:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>media features device-aspect-ratio_CSS参考手册_web前端开发参考手册系列</title>
<style>
@media screen and (device-aspect-ratio:16/10){
body{color:#f00;}
}
</style>
</head>
<body>
<div class="test">当你将输出设备屏幕分辨率为16:10时,本行文字显示为红色</div>
<script>
</script>
</body>
</html>

实例,判断屏幕横屏

@media screen and (min-aspect-ratio: 13/8) {

}

移动设备显示尺寸大全

@media screen and ( min-width: 212px){/*213px显示屏样式 LG Optimus One*/}
@media screen and ( min-width: 319px){/*320px显示屏样式 苹果4/4S/5C/5S黑莓Z30 */}
@media screen and ( min-width: 359px){/*360px显示屏样式 索尼Z1*/}
@media screen and ( min-width: 383px){/*384px显示屏样式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/}
@media screen and ( min-width: 399px){/*399px显示屏样式 三星galaxyNote*/}
@media screen and ( min-width: 414px){/*414px显示屏样式 苹果6plus*/}
@media screen and ( min-width: 423px){/*424px显示屏样式 LG 4X */}
@media screen and ( min-width: 479px){/*480px显示屏样式 索尼MT27i Xperia sola*/}
@media screen and ( min-width: 539px){/*640px显示屏样式 摩托罗拉Droid3/4/Razr Atrix 4g*/}
@media screen and ( min-width: 639px){/*640px显示屏样式*/}
@media screen and ( min-width: 640px){/*640px以上显示屏样式*/}

PS:一般用苹果的屏幕适配就不会有问题

8plus 宽度:375
6plus 宽度:414

参考地址:http://www.w3cplus.com/content/css3-media-queries

css3的媒体查询(Media Queries)的更多相关文章

  1. CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全

    媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...

  2. CSS3 之媒体查询Media Query

    Media Queries是CSS3有关媒体查询的属性,有了CSS3 之媒体查询Media Queries就可以进行媒体查询,针对每个不同的媒体进行不同的样式编写.传说中的Web响应式布局就可以毫无压 ...

  3. 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法

    有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...

  4. 媒体查询Media Queries详解

    @media 标签可以说是响应式网页的开发基础.其主要由媒体类型(Media Type)和 媒体特性(Media Query)两部分组成. Media Type 设定后面规则生效的展示类型,包括all ...

  5. 怎样使用CSS3媒体查询(Media Queries)制作响应式网站

    自本周开始博主将开始同大家一起研究响应式web设计,CSS3 Media Queries是入门,本周更新,博主将给大家分享media queries的一些常用的用法及注意事项. Media Queri ...

  6. CSS3媒体查询(Media Queries)介绍

    媒体类型 all 所有设备 screen 电脑显示器 handheld 便携设备 tv 电视类型设备 print 打印用纸打印预览视图 关键字 and not(排除某种设备) only(限定某种设备) ...

  7. 关于媒体查询 @Media Screen 与响应式

    其实CSS2中已经有了媒体查询的概念,但是CSS3中媒体查询功能更加的强大! 首先,我们来看一个小例子 设置媒体查询的 Max Width ,改变窗口大小到600px的时候就会触发一下代码: @med ...

  8. 媒体查询media参数以及其兼容性问题

    一.设置meta标签 在使用媒体查询media之前我们需要先设置meta标签,对设备的缩放等参数进行设定. <!--设置缩放和绘制--> <meta name="viewp ...

  9. 媒体查询@media query

    @media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...

随机推荐

  1. php正规则表达式的语法

    界定符的三种书写方式: regexpal工具(正规则表达调试工具): 可以实时显示效果出来. 原子: 可见原子,即uincode编码表中的某个字符 不可见原子: 为了避免编码问题导致匹配不正确,要把文 ...

  2. 推荐几个的chorme的扩展程序

    下面来解释下这几个插件 (0)Context : 管理这些乱七八糟的扩展程序,插件用的时候,点开,不用的时候,关闭,这样可以降低游览器的负荷 (1)AngularJS Batarang : 测试ang ...

  3. gulp入坑系列(3)——创建多个gulp.task

    继续gulp的爬坑路,在准备get更多gulp的具体操作之前,先来明确一下在gulp中创建和使用多个task任务的情况. gulp所要做的操作都写在gulp.task()中,系统有一个默认的defau ...

  4. access中根据一个表创建另一个

    access中根据一个表创建另一个 SELECT * INTO newTableFROM zD_qlr; SELECT * into mdFROM zd IN 'E:\fz\高阳\大姚\fz\bz\b ...

  5. anriod TabHost

    package com.example.yanlei.mytk; import android.os.Bundle; import android.support.v7.app.AppCompatAc ...

  6. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q91-Q93)

    Question 91You have a custom user profile property named MyProperty.You need to create a Web Part th ...

  7. Android 设计模式一:EIT造型

    前言:首先不提造型,我们先来学习公式. 思绪回到于十七世纪中,牛顿提出了简单公式:F=ma:让人们能轻易理解物体运动的复杂<关系>. 再如,于二十世纪初,爱因斯坦发表了简单公式:E=MC平 ...

  8. Quartz 2d绘图

    今天看了一下Quartz 2D绘图,我只想说:不要把绘图和动画那些东西当做一个很复杂的东西,其实只要你认真看还是可以理解的.他们并不难.啰嗦了几句,现在直接进入正题: 前提是我们必须新建一个singl ...

  9. 浅谈iOS中的单例模式

    iOS中的单例模式     就我本身理解而言,我认为的单例:单例在整个工程中,就相当于一个全局变量,就是不论在哪里需要用到这个类的实例变量,都可以通过单例方法来取得,而且一旦你创建了一个单例类,不论你 ...

  10. Http协议中 常用的参数应用

    1 请求来自哪一个页面 request.getHeader("referer"); 在购买页,通过a标签进入AddressAction中,地址保存后,需要跳到原先的页面. 另外,另 ...