从事web前端的伙伴们都会知道响应式网站，那何为响应式网站？ 响应式网站就是一个网站能自动根据不同的设备来显示效果的网站（大白话），因为我们经常用的设备比如电脑、平板、手机等，这些设备的屏幕是不一样的，响应式网站就是根据不同的设备、不同的屏幕宽度（像素），可以自动的给用户呈现不同样式，使你的网站电脑可以显示，手机也可以显示，而不是制作两个版本的网站。制作响应式的网站可以有两种方式：1.就是通过服务器端来判断，服务器端的语言比如说PHP、jsp或者 .net等，通过服务器判断用户目前使用的是什么设备，然后发送响应的版本给用户。2.就是通过Css3的media query（媒体查询）的方法来实现。 这两种方式各有利弊，制作的时候可以折衷考虑。
今天我就简单的介绍一下第二种 media query，早在css2.1的时候就已经定义了media，真正火起来的时候是Css3的出现。现在上百度一搜响应式网站，嗖嗖的能出来好多，废话不说了，先来介绍一下这个媒体查询。
咱们正常的link 链接css样式表的方式是：
现在我们使用media query 链接css样式表是这么写
意思是当屏幕的宽度是小于800px的时候加载style.css
也可以使用@import 方式引用，这种方式的引用，要在style中
本人不推荐这种方式，但是这也没有什么问题
也可以在css样式表中直接写媒体查询
@media screen and (max-width: 600px) {
选择器 {
属性：属性值；
}
}
----------------------------------------------------------------------------------------------------
下面具体介绍一下media query的使用方法
在中
screen 是设备类型 and 是并且的意思 （max-width:600px）就是小于600px,在这里不用'<' '>'是因为html代码也用这个符号。
也可以多个media一块用
----------------------------------------------------------------------------------------------------------------
使用方式
@media 设备类型 only(选取条件) not( 选取条件) and (设备特性)， 设备二{样式}
设备类型用很多，常用的有：
浏览器不兼容IE7和IE8，具体兼容情况如下：
------------------------------------------------------
媒体查询(media query)可以使用媒体类型和媒体特性。媒体类型表明目标设备类型。媒体类型包括:
all (所有设备类型)
screen (电脑屏幕)
handheld (手持设备)
tv (电视类型设备)
媒体特性包括一些参数:
浏览器窗口的最大,最小尺寸(width and height)
屏幕的宽高(width and height)
屏幕方向(landscape or portrait)
设备屏幕的输出宽度Device Width
上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率
--------------------------------------
iPhone4
上面的样式是专门针对iPhone4的移动设备写的。
iPad
在大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说上面的例子，在纵向(portrait)时采用portrait.css来渲染页面；在横向（landscape）时采用landscape.css来渲染页面。
android
/*240px的宽度*/
/*360px的宽度*/
/*480px的宽度*/
我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。
not关键字
not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。
only关键字
only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。
在Media Query中如果没有明确指定Media Type，那么其默认为all，如：
另外还有使用逗号（，）被用来表示并列或者表示或，如下
上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上
文章评论