视口与媒体查询_第1页
视口与媒体查询_第2页
视口与媒体查询_第3页
视口与媒体查询_第4页
视口与媒体查询_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

在过去，我们的网站开发只需要针对电脑开始即可，但是现在由于现在终端设备的多样化，如手机，平板。不仅如此，不同的电脑，手机，平板也有各种不同尺寸。这就产生了问题了，同一个网站开发出来，遇到了不同的终端。可以会出现各种不同的效果。那么怎么解决这个问题，是很多开发者或者说是设计师一直比较头疼的问题。当前，最可靠的方式是开发多套网站。即电脑开发一套网站，手机开发一套网站。这样没有问题。我个人认为在预算充足的情况，这么做绝对是首选。但是，我们能不能做一套网站，让它可以完美的去适应屏幕。即根据我们的浏览器的大小实现自适应，让我的所有设备访问都可以得到一致性的体验。这个可以做到嘛？答案当前是可以的。这就要说到我要给大家说的这一个东西：响应式。什么是响应式，在网上有很多叫法，我给大家罗列一下：什么是响应式：它是针对任意设备对网页内容进行完美布局的一种显示机制！什么是响应式：它是针对任意设备对网页内容进行完美布局的一种显示机制！好了，上面已经简单介绍了一下响应式。当然，网上也有很多资料，你也可以去了解。但是有一个问题，响应式真的好嘛？我还真不敢这么说。因为坊间对响应式也是褒贬不一。要不要使用，也是看开发人员自己的选择。这里，我也可以推荐几个响应式网站，你可以去鉴赏一下。响应式绝对不是万能，但是它有自己的优势，因此，学习它我认为是很有必要的http://www.microsoft.com/zh-cn响应式绝对不是万能，但是它有自己的优势，因此，学习它我认为是很有必要的http:///http：//webteam./接下来，我们就讲一下怎么来实现浏览器的自适应响应.首先,我们要了解一个概念:视口视口(viewport)，即可视区域的大小，是指浏览器窗口内的内容区域，不包含工具栏、标签栏等.注意，它和我们以前认识的屏幕尺寸不是一个概念.屏幕尺寸指的是设备的物理显示区域，用户屏幕的整体大小.以iphone为例吧!它的宽度有980,这是不是有点像是人为设置的？对,这是乔布斯为了让iphone有更好的查看网页的视野设定的.试想一下！我们在手机上看的网站应该有哪些特性.基本上的手机网站，都不会出现横向滚动条，不让用户可以对页面放大缩小.要实现这个效果，在页面上加上下面这句代码：vmetaname="viewport"7021源代码content="width=device-width,initial-scale=1・0,minimum-scale=1・0,maximum-scale=1・0,user-scalable=no"id="viewport"/>属性解释：width=device-width:宽度是设备宽度initial-scale=1.0:初始大小为1倍minimum-scale=1.0:最小为1倍maximum-scale=1.0:最大为1倍user-scalable=no：不要进行缩放然后,我们讲一下媒体查询先简单说一下这个概念,说得简单点,就是让我们可以根据显示窗口的不同来单独设置样式.注:媒体查询不支持IE低版本.举个例吧：我现在想做一个功能，可以根据我的屏幕大小来修改页面的颜色.我们来使用外连式的媒体查询，就直接在link标签里加上media这个属性就可以了：第一步:新建3个css文件index1.cssindex2.cssindex3.cssbody{background:red;}body{background:blue;}body{background:yellow;}这三个CSS中都用页面设置了不同的背景颜色第二步，创建index.html页面，然后使用媒体查询分别引用三个文件<!DOCTYPE3<h<head><metacharset="utf-8"><titlex/title>!最大480px的也就是小于480的使用indexl.css-<linkrel="stylesheet"href=,,css/indexl.css"|media="(max-width:480px)l/>!-- 481至!|768的使用index2.css--><linkrel=i,stylesheet"href="css/index2.css"media="(min-width:481px)and(max-width:768px)"/>!-- 769的使用index3・css--><linkrel=,,stylesheet"href="css/index3.css"media="(min-width:769px)"k></head><body></body>上面就是使用媒体查询的代码如果看不明白,在每一个引用上还有相应的解释可以参考最后出来的效果如下：小于480481-768760以上小于480481-768760以上接下来我们用同样的例子来讲一下内嵌式:这个我们就只需要一个CSS样式，然后在样式上加上媒体查询即可.我现在把样式直接写在HTML文件中，给大家演示与参考：3434日567[-8^9[10111213B14B15161718[19B2021222324252627卜2829<body></body>1<1D0CTYPEhtml>2S<html><head> 将样式放在媒体查询中，<metacharset="utf-8,,> 所有小于480的页面都可以放在这个位置.<titlex/title> 我们就可以根据不同宽度做不同的样式了@mediaonlyscreenand(max-width:480px){body{background:red;}}(g)meaiaonlyscreenana(min-wiatn:48ipx;ana(max-width:768px){body{background:blue;}}@mediaonlyscreenand(min-width:769px){body{background:yellow;}}</style></head>30最后出来的效果与上面的外连式相同，这里我就不贴图展示了.下面,给大家简单讲一下使用我们刚才讲的知识能做的效果.这里基于bootstrap完成的响应式网站功能，其它几个地方就用到了我们刚才讲的知识.如»»如»»—■；•齐、**•丫・■«>••«•・・."，・、“何色介绍花H音乐，何色介绍花H音乐，在上面中，我们的头部导航，轮播图中文字显示，还有下面的音乐部分使用到了媒体查询.导航的代码与效果：■IVUloc-d-UnFfiJdlUn-tJDr-tfirfiiLl^-uUfeiA<•--rrm鼻求--：■ h.■IVUloc-d-UnFfiJdlUn-tJDr-tfirfiiLl^-uUfeiA<•--rrm鼻求--：■ h.円::.<117ElA53-BJiaViiBr-iE~tz'>^■divzli33-"cimts1nei">远.干代5clnjs-^btabin-navtar18- nolla口“亡_djat-i-tdiEqnt--*inav-Gollapse■*><>9PHncIhsss'iect-bar"X.rapHn>口nn.alHJ3-"iccz!-t-ii:,,><irapftn>■cjtbn.eldJi-"iaM,i-tir">€l,r3pEin>glow'beard*ht 干哥弋/»<1lvcl«i35=i,n.aY-«^Dll.iFB5-,B><!--“iiHVriDa^zbaE-JSBrciiina^liax-lozXiceo-->CitiELa3a-B'nAvnih±-ir-sf-6icJi">clasj-,,deEi™,,>caFllpiT■咛四-1口也-a简弁叮抽<11Xah£!=:=*■in-r71eB>A^</a>Vll>cLi>cahTcf-1-4j-Tn!J3.cB：>-n-jS^/a>e.riij</Ul></div>页面輔抜鼻一走比恻时,AftML这是更面比较大时品示岀采的皱卑花千骨自;^.r!dJ.V>C/1LV>轮播图的代码与效果<!--轮招圏--><di?ll-'niCiarousel"Ela^s-■cBxco5tl-><!―CBZC'lftlLTfiU■-><dlvclsar-'-carouseJ-iiLze:Ibf><dlvCl*3fl-"aE-2-«.rELt£I">■cljia3ic--"lngi-,lb].Jpfl"1■CdlYCli53-,F£fiICU3Sl-Cd!f.lLonTiLxM兰li-phuis亡€ti4>41i^・玄妁・EW54 芝一ex両帀之斗，祈頁廿或：去爭直舸人力设沪■方为廿叵逅寸引工烤二右削感.it东*才P的人制'-■cfdScdiv£jAQS"lliEfinB>■sui寸aric-^inrii/'ltu-.jpg"/><jdi7><dlv■iui吕 .jpg・&<^diT><divGl*H3-*4itEn"i><LD-gaD3-"irig^ltHl /></di¥><!—CftEIHJfff1mv■-><HClfl.55=，'CfiEG!.15-Sl-C7nTrnlitft"hZC：='!IT H-511de=PFri：--->11HrlUC-F<.rD><htli5s=,,C6Eci.i5-El-c3n7rDliLglic-brEt=p*Tyf.!.rruw-1"rlacH-511d.e=~neTr~>.tr!：HTLDr</a></d±-v>C/dlv> SSr6i2Sfi-44JstSH注金:hMd^hphene暑呂宇报溝證吧.在它£Wl的旳棧則不蛊示.日宾血用図加豪国,田口在下面略迅剧询鈕係如淀甘折一下@media(max-width:767px).hidden-phone{display:none[important;上面这句@media是啥意思呢?这个是媒体查询的代码，翻译过来意思就是：最大宽度是767px的时候，才使用下面的样式,再简单点：页面小于767px时，.hidden-phone这个样式生效很神奇吧，我们上图就是页面小于767px时的图，看一下大于767时的图:■彊.幽.古幕宜■如.馬口址氏」在旁傅阳」■懈计力Xn■彊.幽.古幕宜■如.馬口址氏」在旁傅阳」■懈计力Xn円胃科咖毗目M貞那辭且尹馴讪苛債粧、人副飾

人人文库> 全部分类> 行业资料 > 各类标准

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论