icon-rss-large

中文泛技术类IT博客 | 留言

软路由 | 硬路由 | 网站地图 |

Media Queries详解

发表于 2017年03月14日 教程版

Media Queries详解 教程


Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码:
  <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
或者这样的形式:
  <style type="text/css" media="screen">
    @import url("css/style.css");
  </style>
不知道大家留意没有,其中两种方式引入CSS样式都有一个共同的属性“media”,而这个“media”就是用来指定特定的媒体类型,在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型,
如屏幕(screen)和打印(print)的样式表,当然还有其他的,比如说“TV”,“handheld”等,其中“all”表示的是支持所有媒体介质。有关于更多的Media类型,可以点击这里。
上面简单说了一下HTML4和CSS2的“Media Queries”,而今天的主要是来学习CSS3中的"Media Queries"的更多使用方法和相关知识,下面我们开始进入今天的主题。
CSS3中的Media Queries增加了更多的媒体查询,同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件,如果媒体符合相应的条件,那么就会调用对应的 样式表。
换句简单的说,“在CSS3中我们可以设置不同类型的媒体条件,并根据对应的条件,给相应符合条件的媒体调用相对应的样式表”。
现在最常见的一个 例子,你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,
让你制 作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。
首先来看一个简单的实例:
  <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)
媒体类型(Media Type)在css2中是一个常见的属性,也是一个非常有用的属性,可以通过媒体类型对不同的设备指定不同的样式,在css2中我们常碰到的就是 all(全部),screen(屏幕)
,print(页面打印或打邱预览模式),其实在媒体类型不止这三种,w3c总共列出了10种媒体类型。
页面中引入媒体类型方法也有多种:
1、link方法引入
   <link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
2、xml方式引入
  <?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ?>
3、@import方式引入
@import引入有两种方式,一种是在样式文件中通过@import调用别一个样式文件;另一种方法是 在<head>>/head>中的<style>...</style>中引入,单这种使用方法在 ie6-7都不被支持 如
样式文件中调用另一个样式文件:
   @import url("css/reset.css") screen;
   @import url("css/print.css") print;
在<head>>/head>中的<style>...</style>中调用:
  <head>
    <style type="text/css">
    @import url("css/style.css") all;
    </style>
  </head>        
4、@media引入
这种引入方式和@imporr是一样的,也有两种方式:
样式文件中使用:
   @media screen{
     选择器{
    属性:属性值;
     }
   }
在<head>>/head>中的<style>...</style>中调用:
  <head>
    <style type="text/css">
    @media screen{
           选择器{
         属性:属性值;
       }
    }
    </style>
  </head>        
以上几种方法都有其各自的利弊,在实际应用中我建议使用第一种和第四种,因为这两种方法是在项目制作中是常用的方法,对于他们的具体区别,我就不说了,想了解的大家可以去找度娘或G爸,
他们能帮你解决。
二、媒体特性(Media Query)
前面有简单的提到,Media Query是CSS3 对Media Type的增强版,其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则),常用的特性w3c共列出来13种。
具体的可以参阅:Media features。为了更能理解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的具体使用方式
一、最大宽度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"  />
上面表示的是:当屏幕大于或等于900px时,将采用big.css样式来渲染Web页面。
三、多个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的设备上。
关于Media Query的使用这一节就介绍到此,最后总体规纳一下其功能,个人认为就是一句话:Media Queries能在不同的条件下使用不同的样式,使用页面达到不同的渲染效果。

本文标题:Media Queries详解
本文链接:http://www.newhairproducts.com/index.php/post/1180.html
作者授权:除特别说明外,本文由 citywo 原创编译并授权 大城小我 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。
0
留言区
留言区

大发28彩票 www.76933.com-体彩足球任选九| www.682721.com-致富彩票是不是骗局| www.782612.com-福利彩票七彩乐开奖| www.879077.com-来彩网-| www.14321.com-天津时彩直播| www.405862.com-北京七星彩内部会员| www.931941.com-华彩快3-| www.cai03.cc-玩快三是什么意思| www.sc38.com-福彩3d论坛手机板| www.20ab.com-创富彩票苹果版| www.953628.com-足彩复式奖金计算器| www.il68.com-澳客网足彩电脑版| www.09gb.com-市体彩中心电话| www.971428.com-快播彩票手机版下载| www.bd27.com-万博博彩app| www.8bx.com-匕星彩号吗兰多少| www.955566.com-正规的彩票网站排行| www.bn9.com-福彩工作人员骗局| www.pe53.com-快三一分钟一期| www.178943.com-福彩快三官网app| www.288820.com-快三中了两个号| www.03ma.com-江苏快三还有加奖么| www.315813.com-爱彩乐时时彩走势图| www.442273.com-ag快彩是什么意思| www.600432.com-彩票没人买了| www.719126.com-彩虹周杰伦原唱| www.823440.com-彩涂铝卷市场| www.921866.com-青海省快三图| 杏彩www.00840w.com| www.368848.com-超级七星彩-| www.8003.cn-nba篮球博彩| www.134866.com-龙彩科技-| 好彩www.60123s.com| www.kd26.com-体彩汇总-| www.s21.club-中国福利彩票怎么玩| www.76oz.com-几点停止买彩票| www.575545.com-竞彩实体店出票| www.ge08.com-福彩七乐彩没人买| www.960305.com-套彩金是什么| www.892863.com-超级彩票助手官方| www.163.biz-五洲彩票倒闭| 凤凰彩票www.77801w.com| www.21933.com-竞彩分析师-| www.67.cm-3d今天报纸彩图版| www.012116.com-长沙彩票开奖| www.58862.com-游戏机吐出的彩票| www.338474.com-湖南福彩官网| www.477900.com-快乐彩专打五行| www.629563.com-安卓997彩票平台| www.869912.com-中国网易彩票官网| www.ro76.com-福彩快乐十分下载| www.474119.com-无锡福彩中心| www.580789.com-彩票平台源码哪家好| www.661836.com-海南七星彩开奖电话| www.748880.com-旺彩预测公众号| www.847883.com-古建筑彩绘几何纹样| www.913235.com-2彩88官网-| www.979635.com-玩时时彩送彩金| www.197691.com-澳洲5分彩开奖| www.099998.com-南方双彩官方网| www.908879.com-彩票价钱规则| www.870957.com-南宁体彩兑奖中心| www.953521.com-港版红好彩-| 彩票大家乐www.21202u.com| www.46nf.com-246好彩论坛| www.864824.com-彩膜怎么贴-| www.963123.com-江苏省福彩开奖公告| 鑫亿彩www.035059.com| www.587123.com-万彩吧下载链接| www.716355.com-彩铅如何画苹果| www.792512.com-彩票七位数开奖号码| www.879058.com-百盈快三官网app| www.978000.com-富彩彩票是正规的吗| www.ca.com-北京福利彩票快3| www.pr85.com-98彩是正规平台吗| www.3al.com-七彩乐今日开奖号码| www.61fj.com-今天彩吧3d第二版| www.71511.com-精英彩票-| www.895653.com-大中华彩票邀请码| www.969229.com-中神彩下载-| www.cai52.com-快三开奖结果走势图| www.125043.com-安庆彩票头-| www.975405.com-快彩论坛-| www.580190.com-重生买彩票小说| www.068.bid-金万城彩票平台| www.2268.win-体彩三句话第一时间| www.79764.com-竞彩足球稳赚概率| www.3242.org-最近快三中奖达人| www.r99.cn-福彩三d玩法介绍| www.101819.com-江苏快三改版没人买| www.cp0418.com-福建福彩快三走势图| www.445360.com-能手机下载的才彩票| www.776783.com-竞彩大小球-| www.cp9738.com-昨天快三走势图| www.wy71.com-新浪彩票开奖结果| www.38fl.com-金鱼彩铅画图片| www.822.date-大佬彩票平台| www.6819.biz-新浪彩票图表频道| www.39106.com-好彩堂马会开奖记录| www.9276.vip-江苏快三计划公式| www.3898.win-彩票和制图-| www.109047.com-今晚开的七星彩号码| www.990957.com-一分钟一期彩票骗人| www.926342.com-彩77手机版下载| 500彩票www.50051m.com| www.294100.com-利彩彩票app下载| www.805293.com-十分彩是正规| www.zb07.com-五福彩票不让提现| www.04yj.com-福彩3d太湖马后炮| www.272168.com-博牛彩票安装| www.316896.com-福彩3d助手下载| www.311819.com-彩票乐透型c515| www.222683.com-时时彩反倍投心得| www.960000.com-彩票朝圣软件| www.57581.cc-澳客赢家彩票网| www.xi09.com-7彩国际是不是假的| www.846266.com-彩票打官司案件| www.83622.cc-易中彩票网站靠谱吗| www.3886.biz-足彩竞猜官方app| www.197013.com-马来三分彩官方开奖| www.504844.com-湖北宜昌彩票中奖| www.602081.com-游戏厅里的彩票| www.789718.com-竞彩彩票合买群骗局| www.890519.com-神彩趋势软件下载| www.970474.com-广西快三时间开奖| 大赢家彩票www.543411.com| www.126995.com-彩铅入门人物画| www.161325.com-福彩自助终端代理| www.77007.cc-3α彩票贴吧| www.919134.com-比较靠谱的黑彩平台| www.3852.org-七星彩杀四位| www.304728.com-江苏省福彩快三走执| www.390528.com-博都彩票-| www.985922.com-足球彩票指南报纸| www.ap32.com-贵州体彩兑奖地址| www.2546.xyz-众恒彩票app下载| www.2764.biz-彩票壁纸-| www.9317.online体彩公信力-| www.806869.com-香港赛马彩票平台| www.c24.net-七星彩输入号码查询| www.lz86.com-87彩店官网app| www.44676.com-河南人彩礼是多少| www.066001.com-彩票363-| www.1345.me-体彩11选5浙江| www.71665.cc-3d天天彩就业时报| www.251631.com-怎样下载中彩网软件| www.318235.com-彩虹伞打地鼠| www.378002.com-结婚彩礼全国排行榜| www.88297.cc-333111六神彩| www.ip60.com-105彩票网址| www.91rp.com-千百万彩票官网| www.659339.com-彩票开奖第35期| www.778811.com-查银海彩报-| www.897465.com-q彩网登陆-| 博乐彩票www.558363.com| www.g00.me-彩票专业选号分析器| www.79qt.com-彩票快三视频| www.5218.pw-巴西三分彩开奖| www.186721.com-牛彩网-| www.303023.com-网易彩票1分快3| www.362400.cc-描写彩虹的优美语段| www.561306.com-下载中彩娱乐网| www.793270.com-立彩彩票追号计划表| www.655813.com-湖北彩礼一般给多少|