視口與媒體查詢_第1頁
視口與媒體查詢_第2頁
視口與媒體查詢_第3頁
視口與媒體查詢_第4頁
視口與媒體查詢_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

在過去，我們的網(wǎng)站開發(fā)只需要針對電腦開始即可，但是現(xiàn)在由于現(xiàn)在終端設(shè)備的多樣化，如手機，平板。不僅如此，不同的電腦，手機，平板也有各種不同尺寸。這就產(chǎn)生了問題了，同一個網(wǎng)站開發(fā)出來，遇到了不同的終端?？梢詴霈F(xiàn)各種不同的效果。那么怎么解決這個問題，是很多開發(fā)者或者說是設(shè)計師一直比較頭疼的問題。當(dāng)前，最可靠的方式是開發(fā)多套網(wǎng)站。即電腦開發(fā)一套網(wǎng)站，手機開發(fā)一套網(wǎng)站。這樣沒有問題。我個人認(rèn)為在預(yù)算充足的情況，這么做絕對是首選。但是，我們能不能做一套網(wǎng)站，讓它可以完美的去適應(yīng)屏幕。即根據(jù)我們的瀏覽器的大小實現(xiàn)自適應(yīng)，讓我的所有設(shè)備訪問都可以得到一致性的體驗。這個可以做到嘛？答案當(dāng)前是可以的。這就要說到我要給大家說的這一個東西：響應(yīng)式。什么是響應(yīng)式，在網(wǎng)上有很多叫法，我給大家羅列一下：什么是響應(yīng)式：它是針對任意設(shè)備對網(wǎng)頁內(nèi)容進行完美布局的一種顯示機制！什么是響應(yīng)式：它是針對任意設(shè)備對網(wǎng)頁內(nèi)容進行完美布局的一種顯示機制！好了，上面已經(jīng)簡單介紹了一下響應(yīng)式。當(dāng)然，網(wǎng)上也有很多資料，你也可以去了解。但是有一個問題，響應(yīng)式真的好嘛？我還真不敢這么說。因為坊間對響應(yīng)式也是褒貶不一。要不要使用，也是看開發(fā)人員自己的選擇。這里，我也可以推薦幾個響應(yīng)式網(wǎng)站，你可以去鑒賞一下。響應(yīng)式絕對不是萬能，但是它有自己的優(yōu)勢，因此，學(xué)習(xí)它我認(rèn)為是很有必要的http://www.microsoft.com/zh-cn響應(yīng)式絕對不是萬能，但是它有自己的優(yōu)勢，因此，學(xué)習(xí)它我認(rèn)為是很有必要的http:///http：//webteam./接下來，我們就講一下怎么來實現(xiàn)瀏覽器的自適應(yīng)響應(yīng).首先,我們要了解一個概念:視口視口(viewport)，即可視區(qū)域的大小，是指瀏覽器窗口內(nèi)的內(nèi)容區(qū)域，不包含工具欄、標(biāo)簽欄等.注意，它和我們以前認(rèn)識的屏幕尺寸不是一個概念.屏幕尺寸指的是設(shè)備的物理顯示區(qū)域，用戶屏幕的整體大小.以iphone為例吧!它的寬度有980,這是不是有點像是人為設(shè)置的？對,這是喬布斯為了讓iphone有更好的查看網(wǎng)頁的視野設(shè)定的.試想一下！我們在手機上看的網(wǎng)站應(yīng)該有哪些特性.基本上的手機網(wǎng)站，都不會出現(xiàn)橫向滾動條，不讓用戶可以對頁面放大縮小.要實現(xiàn)這個效果，在頁面上加上下面這句代碼：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:寬度是設(shè)備寬度initial-scale=1.0:初始大小為1倍minimum-scale=1.0:最小為1倍maximum-scale=1.0:最大為1倍user-scalable=no：不要進行縮放然后,我們講一下媒體查詢先簡單說一下這個概念,說得簡單點,就是讓我們可以根據(jù)顯示窗口的不同來單獨設(shè)置樣式.注:媒體查詢不支持IE低版本.舉個例吧：我現(xiàn)在想做一個功能，可以根據(jù)我的屏幕大小來修改頁面的顏色.我們來使用外連式的媒體查詢，就直接在link標(biāo)簽里加上media這個屬性就可以了：第一步:新建3個css文件index1.cssindex2.cssindex3.cssbody{background:red;}body{background:blue;}body{background:yellow;}這三個CSS中都用頁面設(shè)置了不同的背景顏色第二步，創(chuàng)建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>上面就是使用媒體查詢的代碼如果看不明白,在每一個引用上還有相應(yīng)的解釋可以參考最后出來的效果如下：小于480481-768760以上小于480481-768760以上接下來我們用同樣的例子來講一下內(nèi)嵌式:這個我們就只需要一個CSS樣式，然后在樣式上加上媒體查詢即可.我現(xiàn)在把樣式直接寫在HTML文件中，給大家演示與參考：3434日567[-8^9[10111213B14B15161718[19B2021222324252627卜2829<body></body>1<1D0CTYPEhtml>2S<html><head> 將樣式放在媒體查詢中，<metacharset="utf-8,,> 所有小于480的頁面都可以放在這個位置.<titlex/title> 我們就可以根據(jù)不同寬度做不同的樣式了@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完成的響應(yīng)式網(wǎng)站功能，其它幾個地方就用到了我們剛才講的知識.如??如??—■；?齊、**?丫?■?>??????."，?、“何色介紹花H音樂，何色介紹花H音樂，在上面中，我們的頭部導(dǎo)航，輪播圖中文字顯示，還有下面的音樂部分使用到了媒體查詢.導(dǎo)航的代碼與效果：■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両帀之斗，祈頁廿或：去爭直舸人力設(shè)滬■方為廿叵逅寸引工烤二右削感.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. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論