@media 媒体查询

CSS3的媒体类型(在响应式会使用)
参看这篇文章(非常合适初学者)
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
自己测试内容及总结
1.CSS2的一些引入媒介类型的方式(感觉没有CSS3的好使)
1.未指定media: 默认为all[任何设备]
2.<!-- 内嵌式: 媒体类型,屏幕设备 -->
<style type="text/css" media="screen">
#div1{color:red; }
</style>

3. <!-- 导入式: 媒体类型,屏幕设备 IE不支持此方式,因此不建议使用-->
<style type="text/css">
@IMPORT url("importMedia.css") screen;
</style>

4. <!-- 链接式: 媒体类型,屏幕设备 -->
<link rel="stylesheet" type="text/css" href="linkMedia.css" media="screen">

5. <!-- @media式: 媒体类型,屏幕设备 -->
<style type="text/css">
@media screen{
#div4{
color:red;
}
}
其中,第五种方法最常使用
2.CSS3 中的@media式
    1.<!-- 内嵌式:媒体查询,屏幕设备且宽度大于500px -->
    <style type="text/css" media="screen and (min-width:500px)">
#div1{
color:red;
}
    </style>
    
    2.<!-- 导入式: 媒体查询,屏幕设备且宽度大于500px -->
    <style type="text/css">
@import url("importMedia.css") screen and (min-width:500px);
    </style>
    
    3.<!-- 链接式: 媒体查询,屏幕设备且宽度大于500px -->
<link rel="stylesheet" type="text/css" href="linkMedia.css" media="screen and (min-width:500px)">
    
    4.<!-- @media式: 媒体查询,屏幕设备且宽度大于500px -->
<style type="text/css">
@media screen and (min-width:500px){
#div4{
color:red;
}
}
这里也是一样使用第四种最好,


3.有一些设备是比较特殊的,要做特殊标记
* 测试 当前页面在手机是否能够根据屏幕大小,选择性执行代码
    * 第一种: *-device-*  专门设置安卓设备的条件
    * 第二种: 使用 视口[viewpoint],让智能设备启动响应布局

案例代码(没什么卵用)
1.Phone4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
2.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" />
3.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" />

其中感觉  viewpoint最好使用吧
总结,就是用下面的方式就好
@media 条件{
选择器{
对应样式
}
}
当然,你可以使用逻辑操作符，包括not、and和only等，构建复杂的媒体查询。
CSS3  的媒体类型
1.all  应用于所有设备
2.print  打印机设备
3.screen   屏幕设备
4.speech 应用于屏幕阅读器等发声设备(什么玩意)
媒体功能(参看手册)
http://www.runoob.com/cssref/css3-pr-mediaquery.html