媒体查询介绍

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

先看一个简单的例子:

  1. <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,我们在次回到前面的实例上:

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

转换成css中的写法为:

  1. @media screen and (max-width: 600px) {
  2. 选择器 {
  3. 属性:属性值;
  4. }
  5. }

其实就是把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

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

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

二、最小宽度Min Width

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

三、多个Media Queries使用

  1. <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

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

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

五、iPhone4

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

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

六、iPad

  1. <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
  2. <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

  1. /*240px的宽度*/
  2. <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
  3. /*360px的宽度*/
  4. <link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
  5. /*480px的宽度*/
  6. <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关键字

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

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

九、only关键字

  1. <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,如:

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

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

  1. <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的时候需要先设置下面这段代码,来兼容移动设备的展示效果:

  1. <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文件,来保证我们的代码实现兼容效果:

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

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

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

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

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

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

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

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

进入CSS3 Media

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

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

其中对于-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两个媒体特性。

一般例子:

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

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

例子:

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

实例,判断屏幕横屏

  1. @media screen and (min-aspect-ratio: 13/8) {
  2.  
  3. }

移动设备显示尺寸大全

  1. @media screen and ( min-width: 212px){/*213px显示屏样式 LG Optimus One*/}
  2. @media screen and ( min-width: 319px){/*320px显示屏样式 苹果4/4S/5C/5S黑莓Z30 */}
  3. @media screen and ( min-width: 359px){/*360px显示屏样式 索尼Z1*/}
  4. @media screen and ( min-width: 383px){/*384px显示屏样式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/}
  5. @media screen and ( min-width: 399px){/*399px显示屏样式 三星galaxyNote*/}
  6. @media screen and ( min-width: 414px){/*414px显示屏样式 苹果6plus*/}
  7. @media screen and ( min-width: 423px){/*424px显示屏样式 LG 4X */}
  8. @media screen and ( min-width: 479px){/*480px显示屏样式 索尼MT27i Xperia sola*/}
  9. @media screen and ( min-width: 539px){/*640px显示屏样式 摩托罗拉Droid3/4/Razr Atrix 4g*/}
  10. @media screen and ( min-width: 639px){/*640px显示屏样式*/}
  11. @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="scr ...

  2. CSS3 之媒体查询Media Query

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

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

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

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

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

  5. 媒体查询Media Queries详解

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

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

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

  7. 简单使用媒体查询@media

    @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 那媒体查询该如何使用呢? 一.铺垫 1.首先我们在使用 @media 的时候需要 ...

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

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

  9. CSS3系列四(Media Queries移动设备样式)

    viewport设置适应移动设备屏幕大小 viewport:允许开发者创建一个虚拟窗口并自定义其窗口的大小或缩放功能 <meta name="viewport" conten ...

随机推荐

  1. JSTL 和 EL

    EL表达式   Expression Language 语法${作用域中的值} 使用EL表达式时,需要在page标签中写上isELIgnored="false",否则EL表达式不生 ...

  2. 机器学习入门05 - 泛化 (Generalization)

    原文链接:https://developers.google.com/machine-learning/crash-course/generalization 泛化是指模型很好地拟合以前未见过的新数据 ...

  3. Java使用OkHttps工具类调用外部接口

    前言 现在公司业务已止不是传统的增删改查等简单的业务处理操作,而是对数据各种联调三方接口与其他系统进行交互等,那么就需要我们在后台java中进行外部接口的调用,本文采用OkHttps工具类对接微信接口 ...

  4. php内核之HashTable

    Zend 把与 HashTable 有关的 API 分成了好几类以便于我们查找,这些 API 的返回值大多都是常量SUCCESS 或者 FAILURE. 初始化 HashTable 下面在介绍函数原型 ...

  5. HDU 1006 Tick and Tick 时钟指针问题

    Tick and Tick Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  6. spring3.0框架检测方法运行时间测试(转)

    主要利用了Spring AOP 技术,对想要统计的方法进行横切处理,方法执行前开始计时,方法执行后停止计时,得到计时方法就是该方法本次消耗时间. 步骤: 首先编写自己的Interceptor类来实现M ...

  7. Shell脚本-自动化部署WEB

    #! /bin/ ] then echo "#### 参数有误,\$1:构建号必填" exit fi cd /root/workspace/xinya_erp/xinya_web ...

  8. python装饰器3:进阶

    装饰器1:函数装饰器 装饰器2:类装饰器 装饰器3:进阶 函数装饰器装饰方法 函数装饰器装饰普通函数已经很容易理解了: @decorator def func():... #等价于 def func( ...

  9. Hystrix降级逻辑中如何获取触发的异常

    通过之前Spring Cloud系列教程中的<Spring Cloud构建微服务架构:服务容错保护(Hystrix服务降级)>一文,我们已经知道如何通过Hystrix来保护自己的服务不被外 ...

  10. YTKNetwork源码详解

    本篇是第三篇关于网络请求的,将讲述YTKNetwork源码,上述两篇分别讲述AFNetworking源码解析以及结合自己项目封装AFNetworking. AFNetworking源码解析:https ...