淺談移動端的自适應問題——響應式、rem/em、利用Js動态實作移動端自适應

淺談移動端的自适應問題——響應式、rem/em、利用Js動态實作移動端自适應

在HTML的頭部，也就是head标簽中增加meta标簽，告訴浏覽器網頁寬度等于裝置螢幕寬度，且不進行縮放，代碼如下：

簡單分析一下這一行代碼的含義：width=device-width表示網頁的寬度等于裝置螢幕的寬度，initial-scale=1.0表示設定頁面初始的縮放比例為1，user-scalable=no表示禁止使用者進行縮放，maximum-scale=1.0 和 minimum-scale=1.0 表示設定最大的和最小的頁面縮放比例。因為各大浏覽器對meta标簽的解析程度不一樣，是以我們要盡可能的去相容所有浏覽器。

目前一般常見的實作響應式有兩種方法，一種是利用媒體查詢，另外一種是bootstrap下的栅格布局，以後介紹bootstrap的時候來介紹栅格布局，這裡主要來說一下如何利用媒體查詢實作響應式布局。

媒體查詢，即 @media 查詢，媒體查詢可以針對不同的螢幕尺寸設定不同的樣式，特别是如果你需要設計響應式的頁面，@media 是非常有用的。當你重置浏覽器大小的過程中，頁面也會根據浏覽器的寬度和高度重新渲染頁面。因為是設定樣式，是以将媒體查詢相關的代碼放在css檔案的最下方即可。

為了更加清晰地了解響應式的用法，我在下方列舉了兩個案例。第一個案例比較簡單，實作了在不同的頁面寬度中改變body的背景顔色的作用。第二個案例以具體的項目來舉例，更加友善使用者

執行個體1：

如果頁面寬度小于 300 像素,則修改body的背景顔色為紅色:

如果頁面寬度大于 300 像素并且小于600像素，則修改body的背景顔色為綠色:

如果頁面寬度大于 600 像素，則修改body的背景顔色為藍色:

代碼解釋：

screen 表示電腦螢幕，平闆電腦，智能手機等，min-width和max-width 用于定義裝置中頁面的最小和最大寬度。

實作響應式代碼如下，放在css檔案的最下方即可：

總結：實際上響應式頁面的實作非常簡單，隻要認真學，經常練，一定可以熟練掌握的！

實際上講了這麼多，大家可能已經了解了rem的用法，但是還不了解如何利用rem去實作移動端的自适應。說到底，rem實作移動端自适應的原來在于它本身的特性，它可以始終根據根元素的字型大小去改變自己的值。目前各種常見手機的螢幕尺寸大小如下圖所示：

我們想實作手機端自适應，就是可以讓頁面的元素字型、間距、寬高等屬性的屬性值可以随着手機螢幕尺寸的變化而變化，接下來我們看如何利用Js來動态的設定rem并實作移動端的自适應，Js代碼如下：

以上代碼實作了利用Js擷取裝置螢幕的寬度，并根據螢幕的寬度動态改變根元素html的font-siz屬性的作用。比如說，對于iphone6而言，螢幕尺寸為750，那麼在iPhone6下html的font-size為1px,是以1rem = 1px;對于iPhone5而言，螢幕尺寸為640，那麼在iPhone5下html的font-size為640/750 = 0.85333px，是以1rem = 0.85333px。這樣的話即使我們對一個元素設定同樣的大小和機關，也會在不同的裝置下顯示不同的大小。比如說div{width:100rem},在iPhone6下它的寬度将等于100px，而在iPhone5下它的寬度等于100 * 0.85333 = 85.333px。這樣我們就真正實作了移動端的自适應，怎麼樣，是不是很簡單呢！