自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

淺談Web自適應

作者：佚名
開發(fā) 前端
隨著移動設備的普及，移動web在前端工程師們的工作中占有越來越重要的位置。移動設備更新速度頻繁，手機廠商繁多，導致的問題是每一臺機器的屏幕寬度和分辨率不一樣。這給我們在編寫前端界面時增加了困難，適配問題在當下顯得越來越突出。記得剛剛開始開發(fā)移動端產(chǎn)品的時候向設計MM要了不同屏幕的設計圖，結(jié)果可想而知。本篇博文分享一些鹵煮處理多屏幕自適應的經(jīng)驗，希望有益于諸君。

前言 

[[193129]] 

隨著移動設備的普及，移動web在前端工程師們的工作中占有越來越重要的位置。移動設備更新速度頻繁，手機廠商繁多，導致的問題是每一臺機器的屏幕寬度和分辨率不一樣。這給我們在編寫前端界面時增加了困難，適配問題在當下顯得越來越突出。記得剛剛開始開發(fā)移動端產(chǎn)品的時候向設計MM要了不同屏幕的設計圖，結(jié)果可想而知。本篇博文分享一些鹵煮處理多屏幕自適應的經(jīng)驗，希望有益于諸君。

特別說明：在開始這一切之前，請開發(fā)移動界面的工程師們在頭部加上下面這條meta:

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 

簡單事情簡單做-寬度自適應

所謂寬度自適應嚴格來說是一種PC端的自適應布局方式在移動端的延伸。在處理PC端的前端界面時候需要用到全屏布局時采用的就是此種布局方式。它的實現(xiàn)方式也比較簡單，將外層容器元素按照百分比鋪滿地方式，里面的子元素固定或者左右浮動。

  1. .div { 
  2.  
  3.   width:100%; height:100px; 
  4.  
  5. } 
  6.  
  7. .child { 
  8.  
  9.   float: left; 
  10.  
  11. } 
  12.  
  13. .child { 
  14.  
  15.   float:right; 
  16.  
  17. }  

由于父級元素采用百分比的布局方式，隨著屏幕的拉伸，它的寬度會無限的拉伸。而子元素由于采用了浮動，那么它們的位置也會固定在兩端。該寬度自適應在新的時代有了新的方法，隨著彈性布局的普及，它經(jīng)常被flex或者box這樣的伸縮性布局方式替代，變得越來越“彈性”十足。需要了解彈性布局，請前往Flex布局教程和鹵煮box布局教程比較。

大小之辨-完全自適應

“完全自適應式”是鹵煮對越此方案的叫法，由于鹵煮現(xiàn)在找不到官方名稱，所以暫時就這樣叫它。這種解決方案相對前一種來說進步不少，不僅僅寬度實現(xiàn)了自適應，而且界面所有的元素大小和高度都會根據(jù)不同分辨率和屏幕寬度的設備來調(diào)整元素、字體、圖片、高度等屬性的值。簡單來說就是在不同的屏幕下，你看到的字體和元素高寬度的大小是不一樣的。在這里，有人就會說利用的是媒體查詢熟悉，根據(jù)不同的屏幕寬度，調(diào)整樣式。鹵煮之前也是這樣想的，但是你需要考慮到界面上的許多元素需要設置字體，如果用media query為每個元素在不同的設備下都設置不同的屬性的話，那么有多少種屏幕我們的css就會增加多少倍。實際上在這里，我們采用的是js和css熟悉rem來解決這個問題的。

REM屬性指的是相對于根元素設置某個元素的字體大小。它同時也可以用作為設置高度等一系列可以用px來標注的單位。

  1. html { 
  2.  
  3. font-size: 10px; 
  4.  
  5. } 
  6.  
  7. div { 
  8.  
  9. font-size: 1rem; 
  10.  
  11. height: 2rem; 
  12.  
  13. width: 3rem; 
  14.  
  15. border: .1rem solid #000; 
  16.  
  17. }  

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

  1. <!--iphone5--> 
  2.  
  3. html { 
  4.  
  5. font-size: 100px; 
  6.  
  7. }  

那么以此為基準，可以計算出一個比例值6.4。我們可以得知其他手機分辨率的設備下根元素字體大小:

  1. /* 
  2.  
  3. 數(shù)據(jù)計算公式 640/100 = device-width / x  可以設置其他設備根元素字體大小 
  4.  
  5. ihone5: 640  ： 100 
  6.  
  7. iphone6: 750 : 117 
  8.  
  9. iphone6s: 1240 : 194 
  10.  
  11. */ 
  12.  
  13. var deviceWidth = window.documentElement.clientWidth; 
  14.  
  15. document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';  

在head中，我們將以上代碼加入，動態(tài)地改變根節(jié)點的font-size值，得到如下結(jié)果:

  

    

 

接下來我們可以根據(jù)根元素的字體大小用rem設置各種屬性的相對值。當然，如果是移動設備，屏幕會有一個上下限制，我們可以控制分辨率在某個范圍內(nèi)，超過了該范圍，我們就不再增加根元素的字體大小了:

  1. var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; 
  2.  
  3. document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';  

一般的情況下，你是不需要考慮屏幕動態(tài)地拉伸和收縮。當然，假如用戶開啟了轉(zhuǎn)屏設置，在網(wǎng)頁加載之后改變了屏幕的寬度，那么我們就要考慮這個問題了。解決此問題也很簡單，監(jiān)聽屏幕的變化就可以做到動態(tài)切換元素樣式:

  1. window.onresize = function(){ 
  2.  
  3. var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; 
  4.  
  5. document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px'; 
  6.  
  7. };  

為了提高性能，讓代碼開起來更加完美，可以為它加上節(jié)流閥函數(shù):

  1. window.onresize = _.debounce(function() { 
  2.  
  3. var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; 
  4.  
  5. document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px'; 
  6.  
  7. }, 50);  

順帶解決高保真標注與實際開發(fā)值比例問題

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

  1. var scale = 1 / devicePixelRatio; 
  2.  
  3. document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');  

這樣設置同樣可以解決在安卓機器下1px像素看起來過粗的問題，因為在像素為1px的安卓下機器下，邊框的1px被壓縮成了0.5px了。總之是一勞永逸!淘寶和網(wǎng)易新聞的手機web端就是采用以上這種方式，自適應各種設備屏幕的，大家有興趣可以去參考參考。下面是完整的代碼:

  1. <!DOCTYPE html> 
  2.  
  3. <html> 
  4.  
  5. <head> 
  6.  
  7.   <title>測試</title> 
  8.  
  9.   <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> 
  10.  
  11.   <script type="text/javascript"> 
  12.  
  13. (function() { 
  14.  
  15.   // deicePixelRatio ：設備像素 
  16.  
  17.   var scale = 1 / devicePixelRatio; 
  18.  
  19.   //設置meta 壓縮界面 模擬設備的高分辨率 
  20.  
  21.   document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); 
  22.  
  23.   //debounce 為節(jié)流函數(shù)，自己實現(xiàn)?；蛘咭雞nderscoure即可。 
  24.  
  25.   var reSize = _.debounce(function() { 
  26.  
  27.       var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; 
  28.  
  29.       //按照640像素下字體為100px的標準來，得到一個字體縮放比例值 6.4 
  30.  
  31.       document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px'; 
  32.  
  33.   }, 50); 
  34.  
  35.   window.onresize = reSize; 
  36.  
  37. })(); 
  38.  
  39.   </script> 
  40.  
  41.   <style type="text/css"> 
  42.  
  43.     html { 
  44.  
  45.       height: 100%; 
  46.  
  47.       width: 100%; 
  48.  
  49.       overflow: hidden; 
  50.  
  51.       font-size: 16px; 
  52.  
  53.     } 
  54.  
  55.     div { 
  56.  
  57.       height: 0.5rem; 
  58.  
  59.       widows: 0.5rem; 
  60.  
  61.       border: 0.01rem solid #19a39e; 
  62.  
  63.     } 
  64.  
  65.     ........ 
  66.  
  67.   </style> 
  68.  
  69.   <body> 
  70.  
  71.     <div> 
  72.  
  73.     </div> 
  74.  
  75.   </body> 
  76.  
  77. </html>  

讓元素飛起來-媒體查詢

運用css新屬性media query 特性也可以實現(xiàn)我們上說到過的布局樣式。為尺寸設置根元素字體大小:

  1. @media screen and (device-width: 640px) { /*iphone4/iphon5*/ 
  2.  
  3.       html { 
  4.  
  5.         font-size: 100px; 
  6.  
  7.       } 
  8.  
  9.     } 
  10.  
  11. @media screen and (device-width: 750px) { /*iphone6*/ 
  12.  
  13.       html { 
  14.  
  15.         font-size: 117.188px; 
  16.  
  17.       } 
  18.  
  19.     } 
  20.  
  21. @media screen and (device-width: 1240px) { /*iphone6s*/ 
  22.  
  23.       html { 
  24.  
  25.         font-size: 194.063px; 
  26.  
  27.       } 
  28.  
  29.     }  

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

  1. @media screen and (min-width: 320px) and (max-width: 650px) { /*手機*/ 
  2.  
  3.   .class { 
  4.  
  5.     float: left; 
  6.  
  7.   } 
  8.  
  9. } 
  10.  
  11. @media screen and (min-width: 650px) and (max-width: 980px) { /*pad*/ 
  12.  
  13.   .class { 
  14.  
  15.     float: right; 
  16.  
  17.   } 
  18.  
  19. } 
  20.  
  21. @media screen and (min-width: 980px)  and (max-width: 1240px) { /*pc*/ 
  22.  
  23.   .class { 
  24.  
  25.     float: clear; 
  26.  
  27.   } 
  28.  
  29. }  

此種自適應布局一般常用在兼容PC和手機設備，由于屏幕跨度很大，界面的元素以及遠遠不是改改大小所能滿足的。這時候需要重新設計整界面的布局和排版了:

如果屏幕寬度大于1300像素

 

如果屏幕寬度在600像素到1300像素之間，則6張圖片分成兩行。

 

如果屏幕寬度在400像素到600像素之間，則導航欄移到網(wǎng)頁頭部。 

 

許多css框架經(jīng)常用到這樣的多端解決方案，著名的bootstrap就是采用此種方式進行柵格布局的。

總結(jié)

不管哪一種自適應方式，我們的目的是使得開發(fā)網(wǎng)頁在各種屏幕下變得好看：如果你的項目定位的用戶群僅僅是使用某種機型的人，那么可以采用第一種自適應方式。如果你的客戶主要是移動端，但是客戶的設備類型龐雜，建議采用第二種方式。如果你雄心勃勃地需要建立一套兼容PC、PAD、mobile多端的一體化web應用，那么第三種選擇顯然是最適合你的。每種方式都有自己的利弊，根據(jù)需求權(quán)衡利害，合理地實現(xiàn)自適應布局，需要不停的實踐和摸索。路漫漫其修遠兮，吾將上下而求索。

參考資料

  • 自適應網(wǎng)頁設計(Responsive Web Design)
  • 移動前端自適應解決方案和比較
  • 移動web適配利器-rem 
責任編輯：龐桂玉 來源： 前端大全
前端Web寬度自適應
相關(guān)推薦

2017-04-13 11:20:37

圖片寬度解決方案前端

2013-09-04 11:02:52

手機web網(wǎng)頁設計

2011-12-27 10:18:31

Web

2012-05-09 10:58:25

JavaMEJava

2010-08-30 09:52:03

DIV高度自適應

2014-09-05 10:10:32

Android自適應布局設計

2023-07-31 08:24:34

MySQL索引計數(shù)

2010-08-30 10:26:20

DIV自適應高度

2022-04-12 07:48:57

云技術(shù)SDN網(wǎng)絡

2024-05-22 09:31:07

2023-10-23 08:48:04

CSS寬度標題

2025-01-21 08:00:00

自適應框架框架開發(fā)

2009-04-23 11:24:09

2011-05-12 11:28:20

按比例縮放

2022-10-24 17:57:06

CSS容器查詢

2017-08-16 14:08:46

Android O圖標視覺

2010-08-26 16:27:46

CSS高度

2014-04-15 13:09:08

Android配色colour

2025-03-12 00:00:22

2015-06-08 10:49:04

點贊
收藏

51CTO技術(shù)棧公眾號