淺談Web自適應(yīng)_第1頁
淺談Web自適應(yīng)_第2頁
淺談Web自適應(yīng)_第3頁
淺談Web自適應(yīng)_第4頁
淺談Web自適應(yīng)_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、優(yōu)就業(yè) 淺談Web自適應(yīng)前言隨著移動設(shè)備的普及，移動web在前端工程師們的工作中占有越來越重要的位置。移動設(shè)備更新速度頻繁，手機廠商繁多，導(dǎo)致的問題是每一臺機器的屏幕寬度和分辨率不一樣。這給我們在編寫前端界面時增加了困難，適配問題在當(dāng)下顯得越來越突出。記得剛剛開始開發(fā)移動端產(chǎn)品的時候向設(shè)計MM要了不同屏幕的設(shè)計圖，結(jié)果可想而知。本篇博文分享一些鹵煮處理多屏幕自適應(yīng)的經(jīng)驗，希望有益于諸君。特別說明：在開始這一切之前，請開發(fā)移動界面的工程師們在頭部加上下面這條meta:1<metaname="viewport" content="width=device-wid

2、th, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">簡單事情簡單做-寬度自適應(yīng)所謂寬度自適應(yīng)嚴(yán)格來說是一種PC端的自適應(yīng)布局方式在移動端的延伸。在處理PC端的前端界面時候需要用到全屏布局時采用的就是此種布局方式。它的實現(xiàn)方式也比較簡單，將外層容器元素按照百分比鋪滿地方式，里面的子元素固定或者左右浮動。123456789.div width:100%; height:100px;.child float: left;.child float:right;由于父級元素采用百分比的布局方式，隨著屏幕的拉伸，它的寬度會無

3、限的拉伸。而子元素由于采用了浮動，那么它們的位置也會固定在兩端。該寬度自適應(yīng)在新的時代有了新的方法，隨著彈性布局的普及，它經(jīng)常被flex或者box這樣的伸縮性布局方式替代，變得越來越“彈性”十足。需要了解彈性布局，請前往Flex布局教程和鹵煮box布局教程比較。大小之辨-完全自適應(yīng)“完全自適應(yīng)式”是鹵煮對越此方案的叫法，由于鹵煮現(xiàn)在找不到官方名稱，所以暫時就這樣叫它。這種解決方案相對前一種來說進步不少，不僅僅寬度實現(xiàn)了自適應(yīng)，而且界面所有的元素大小和高度都會根據(jù)不同分辨率和屏幕寬度的設(shè)備來調(diào)整元素、字體、圖片、高度等屬性的值。簡單來說就是在不同的屏幕下，你看到的字體和元素高寬度的大小是不一樣的

4、。在這里，有人就會說利用的是媒體查詢屬性，根據(jù)不同的屏幕寬度，調(diào)整樣式。鹵煮之前也是這樣想的，但是你需要考慮到界面上的許多元素需要設(shè)置字體，如果用media query為每個元素在不同的設(shè)備下都設(shè)置不同的屬性的話，那么有多少種屏幕我們的css就會增加多少倍。實際上在這里，我們采用的是js和css屬性rem來解決這個問題的。REM屬性指的是相對于根元素設(shè)置某個元素的字體大小。它同時也可以用作為設(shè)置高度等一系列可以用px來標(biāo)注的單位。12345678910html font-size: 10px;div font-size: 1rem;height: 2rem;width: 3rem;border

5、: .1rem solid#000;采用以上寫法，div繼承到了html節(jié)點的font-size，為本身定義了一系列樣式屬性，此時1em計算為10px，即根節(jié)點的font-size值。所以，這時div的高度就是20px，寬度是30px，邊框是1px，字體大小則是10px；一旦有了這樣的方法，我們自然可以根據(jù)不同的屏幕寬度設(shè)置不同的根節(jié)點字體大小。假設(shè)我們現(xiàn)在設(shè)計的標(biāo)準(zhǔn)是iphone5s，iphone5系列的屏幕分辨率是640。為了統(tǒng)一規(guī)范，我們將iphone5 分辨率下的根元素font-size設(shè)置為100px;1234<!-iphone5->html font-size: 100

6、px;那么以此為基準(zhǔn)，可以計算出一個比例值6.4。我們可以得知其他手機分辨率的設(shè)備下根元素字體大小:12345678/*數(shù)據(jù)計算公式 640/100 = device-width / x 可以設(shè)置其他設(shè)備根元素字體大小ihone5: 640 ： 100iphone6: 750 : 117iphone6s: 1240 : 194*/vardeviceWidth = window.documentElement.clientWidth;document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px'在head中

7、，我們將以上代碼加入，動態(tài)地改變根節(jié)點的font-size值，得到如下結(jié)果:接下來我們可以根據(jù)根元素的字體大小用rem設(shè)置各種屬性的相對值。當(dāng)然，如果是移動設(shè)備，屏幕會有一個上下限制，我們可以控制分辨率在某個范圍內(nèi)，超過了該范圍，我們就不再增加根元素的字體大小了:12vardeviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;document.documentElement.style.fontSize = (deviceWidth /

8、 6.4) + 'px'一般的情況下，你是不需要考慮屏幕動態(tài)地拉伸和收縮。當(dāng)然，假如用戶開啟了轉(zhuǎn)屏設(shè)置，在網(wǎng)頁加載之后改變了屏幕的寬度，那么我們就要考慮這個問題了。解決此問題也很簡單，監(jiān)聽屏幕的變化就可以做到動態(tài)切換元素樣式:1234window.onresize = function()vardeviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;document.documentElement.style.fontSi

9、ze = (deviceWidth / 6.4) + 'px'為了提高性能，讓代碼開起來更加完美，可以為它加上節(jié)流閥函數(shù):1234window.onresize = _.debounce(function() vardeviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px',

10、 50);順帶解決高保真標(biāo)注與實際開發(fā)值比例問題如果你們設(shè)計稿標(biāo)準(zhǔn)是iphone5，那么拿到設(shè)計稿的時候一定會發(fā)現(xiàn)，完全不能按照高保真上的標(biāo)注來寫css，而是將各個值取半，這是因為移動設(shè)備分辨率不一樣。設(shè)計師們是在真實的iphone5機器上做的標(biāo)注，而iphone5系列的分辨率是640，實際上我們在開發(fā)只需要按照320的標(biāo)準(zhǔn)來。為了節(jié)省時間，不至于每次都需要將標(biāo)注取半，我們可以將整個網(wǎng)頁縮放比例，模擬提高分辨率。這個做法很簡單，為不同的設(shè)備設(shè)置不同的meta即可:12varscale = 1 / devicePixelRatio;document.querySelector('meta

11、name="viewport"').setAttribute('content', 'initial-scale='+ scale + ', maximum-scale='+ scale + ', minimum-scale='+ scale + ', user-scalable=no');這樣設(shè)置同樣可以解決在安卓機器下1px像素看起來過粗的問題，因為在像素為1px的安卓下機器下，邊框的1px被壓縮成了0.5px了?？傊且粍谟酪?！淘寶和網(wǎng)易新聞的手機web端就是采用以上這種方式，自適

12、應(yīng)各種設(shè)備屏幕的，大家有興趣可以去參考參考。下面是完整的代碼:123456789101112131415161718192021222324252627282930313233343536373839404142<!DOCTYPEhtml><html><head><title>測試</title><metaname="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /><type=&

13、quot;text/java">(function() / deicePixelRatio ：設(shè)備像素var scale = 1 / devicePixelRatio;/設(shè)置meta 壓縮界面 模擬設(shè)備的高分辨率document.querySelector('metaname="viewport"').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-sca

14、le=' + scale + ', user-scalable=no');/debounce 為節(jié)流函數(shù)，自己實現(xiàn)?；蛘咭雞nderscoure即可。var reSize = _.debounce(function() var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;/按照640像素下字體為100px的標(biāo)準(zhǔn)來，得到一個字體縮放比例值 6.4document.documentElement.styl

15、e.fontSize = (deviceWidth / 6.4) + 'px', 50);window.onresize = reSize;)();</><styletype="text/css">html height: 100%;width: 100%;overflow: hidden;font-size: 16px;div height: 0.5rem;widows: 0.5rem;border: 0.01rem solid #19a39e;.</style><body><div></d

16、iv></body></html>讓元素飛起來-媒體查詢運用css新屬性media query 特性也可以實現(xiàn)我們上說到過的布局樣式。為尺寸設(shè)置根元素字體大小:123456789101112131415media screen and (device-width: 640px) /*iphone4/iphon5*/html font-size: 100px;media screen and (device-width: 750px) /*iphone6*/html font-size: 117.188px;<br>media screen and (d

17、evice-width: 1240px) /*iphone6s*/html font-size: 194.063px;這種方式也是可行的，缺點是靈活性不高，取每個設(shè)備的精確值需要自己去計算，所以只能取范圍值?？紤]設(shè)備屏幕眾多，分辨率也參差不齊，把每一種機型的css代碼寫出來是不太可能的。但是它也有優(yōu)點，就是無需監(jiān)聽瀏覽器的窗口變化，它會跟隨屏幕動態(tài)變化。媒體查詢的用法當(dāng)然不僅僅像在此處這么簡單，相對于第二種自適應(yīng)來說有很多地方是前者所遠(yuǎn)遠(yuǎn)不及的。最明顯的就是它可以根據(jù)不同設(shè)備顯示不同的布局樣式！請注意，這里已經(jīng)不是改變字體和高度那么簡單了，它直接改變的是布局樣式！123456789101112

18、1314151617media screenand (min-width: 320px) and (max-width: 650px) /*手機*/.class float: left;media screenand (min-width: 650px) and (max-width: 980px) /*pad*/.class float: right;media screenand (min-width: 980px) and (max-width: 1240px) /*pc*/.class float: clear;此種自適應(yīng)布局一般常用在兼容PC和手機設(shè)備，由于屏幕跨度很大，界面的元素以及遠(yuǎn)遠(yuǎn)不是改改大小所能滿足的。這時候需要重新設(shè)計整界面的布局和排版了:如果屏幕寬度大于1300像素如果屏幕寬度在600像素到1300像素之間，則6張圖片分成兩行。如果屏幕寬度在400像素到600像素

溫馨提示

  • 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)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論