css3的媒体查询(Media Queries)

时间  2019-11-07
标签 css3 css 媒体 查询 media queries 栏目 CSS 繁體版
原文   原文链接

css3的媒体查询(Media Queries)css

 

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

先看一个简单的例子：html

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

上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容：html5

一、screen：这个不用说你们都知道，指的是一种媒体类型；android

二、and：被称为关键词，与其类似的还有not,only，稍后会介绍；css3

三、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。web

前面这个简单的实例引出两个概念性的东西，一个就是媒体类型（Media Type）和 媒体特性（Media Query），首先一块儿来理解一下这两个概念：chrome

媒体类型(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中的写法为：iphone

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

其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){...}的大括号之中。在语句上面的语句结构中，能够看出Media query和css的属性集合很类似，主要区别在：

一、Media query只接受单个的逻辑表达式做为其值，或者没有值；

二、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否知足某种条件的表达式；

三、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的状况

四、CSS属性要求必须有属性值，Media Query能够没有值，由于其表达式返回的只有真或假两种.

经常使用的Media Query以下表所示：

兼容的浏览器：

下面咱们一块儿来看看Media Queries的具体使用方式

1、最大宽度Max Width

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

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

2、最小宽度Min Width

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

3、多个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页面。

4、设备屏幕的输出宽度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所指的是设备的实际分辨率，也就是指可视面积分辨率

5、iPhone4

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

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

6、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来渲染页面。

7、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手机的页面重构问题。

8、not关键字

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

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

9、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，样式都不会被采用。

10、其余

在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 
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程