最近，由于老板交待下去要準(zhǔn)備開(kāi)發(fā)一些移動(dòng)端頁(yè)面出來(lái)，作為一個(gè)工作以來(lái)都是以開(kāi)發(fā)后臺(tái)管理系統(tǒng)為主的web前端開(kāi)發(fā)人員，我對(duì)移動(dòng)端開(kāi)發(fā)的了解并不多，對(duì)于移動(dòng)端響應(yīng)式布局，聽(tīng)過(guò)的一些技巧：使用rem代替px、設(shè)置viewport和使用flex布局等等，雖然一直有這些概念但畢竟沒(méi)有真正動(dòng)手開(kāi)發(fā)過(guò)，所以，就從網(wǎng)上搜索一些博客用以加深了解。在閱讀過(guò)幾篇文章后，發(fā)覺(jué)這些文章的描述是缺乏了背景的上下文，讀時(shí)候會(huì)遇到一些困惑，我就站在我的角度去復(fù)述一下對(duì)移動(dòng)端開(kāi)發(fā)的幾點(diǎn)要點(diǎn)吧。

1、關(guān)于meta標(biāo)簽

在移動(dòng)端開(kāi)發(fā)中，會(huì)涉及到meta標(biāo)簽，這是HTML5里的元信息標(biāo)簽，會(huì)告訴瀏覽器一些有用的信息讓瀏覽器作出不同于默認(rèn)的渲染效果，在移動(dòng)端開(kāi)發(fā)中需要加入一個(gè)必備的元信息：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

這個(gè)標(biāo)簽是讓HMTL文檔的寬度等于設(shè)備的寬度，縮放比例是1，而且不允許用戶自行縮放。

另外的需要加的meta標(biāo)簽是讓頁(yè)面在IOS系統(tǒng)中的手機(jī)瀏覽器中全屏顯示，加入：

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-touch-fullscreen" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

防止頁(yè)面中的數(shù)字和郵箱變成鏈接情況，需要加入：

<meta name="format-detection" content="telephone=no, email=no">

2、devicePixelRatio的理解

devicePixelRatio是設(shè)備像素比的意思，指的是設(shè)備上物理像素和設(shè)備獨(dú)立像素的比例。手機(jī)的寬高物理像素就是手機(jī)參數(shù)里的分辨率的數(shù)值，比如：IphoneX像素是2436x1125像素，那么設(shè)備的橫向有1125個(gè)物理像素，設(shè)備的縱向有2436個(gè)物理像素。在瀏覽器中，通過(guò)window.devicePixelRatio獲取設(shè)備像素比的值，IphoneX的devicePixelRatio值為3，那么設(shè)備的獨(dú)立像素是812x375像素，這個(gè)像素是css3中的“px”值，例如，要想設(shè)置IphoneX中某個(gè)元素的寬與文檔寬一樣width設(shè)為375px。

3、rem的使用

rem可以用來(lái)設(shè)置元素的各種尺寸的值，它是以html元素的字體尺寸為準(zhǔn)，例如html的字體設(shè)為12px，那么1rem=12px。移動(dòng)設(shè)備多種多樣，一般設(shè)計(jì)稿就只有一套，這一套設(shè)備稿是針對(duì)某一個(gè)部設(shè)備的，網(wǎng)上用來(lái)舉例最多的是iphone6。例如：要設(shè)置一個(gè)元素寬度與設(shè)備寬度一致（為了說(shuō)明，有意不使用百分比），那么，iphone6的設(shè)置是 width: 375px。但是在iphone 6 plus打開(kāi)就會(huì)發(fā)現(xiàn)元素的寬度并不等于設(shè)備的寬度。要解決這個(gè)問(wèn)題，在這里有一種解決思路：用JS動(dòng)態(tài)改變html的字體尺寸，尺寸樣式用單位"rem"代替"px"，當(dāng)html字體的尺寸改變了，那么元素的寬度就改變了。

順著上面的思路，假設(shè)設(shè)計(jì)稿是以Iphone6的尺寸設(shè)計(jì)出來(lái)的。我要設(shè)置元素的寬度用rem作單元，但是值為多少合適一點(diǎn)呢？網(wǎng)上說(shuō)到的“網(wǎng)易方案”，用100px為參考，這樣方便看著設(shè)計(jì)稿不用作為太復(fù)雜的計(jì)算就可以得出對(duì)應(yīng)的值。Iphone6在設(shè)計(jì)稿上的寬度應(yīng)該是750px，那么我就設(shè)置元素的width設(shè)為7.5em。要是換到Iphone6 plus設(shè)備上，html的font-size就要改變了，公式應(yīng)該是 window.screen.availWidth / 375 * 100 / 2(注：window.screen.availWidth是設(shè)備的獨(dú)立像素，2是Iphone6的設(shè)備像素比，這里用到375和2皆因假設(shè)設(shè)計(jì)稿是Iphone6)，所以在文檔加載之后，加入以下的代碼：

document.documentElement.style.fontSize = window.screen.availWidth / 375 * 100 / 2 + 'px';

這樣修改了html字體的尺寸，而不需要修改css的代碼，也不需要用媒體查詢。

網(wǎng)上也提及到一種修改 initial-scale的方式，具體思路也是通過(guò)rem實(shí)現(xiàn)，只不過(guò)不是改變html的字體尺寸，而是改變縮放的比例，同樣是以Iphone6的設(shè)計(jì)稿為例，樣式一開(kāi)始就要加入：

html{font-size: calc(100px / 2) ;}

然后用JS改寫meta里的屬性：

let scale = window.screen.availWidth / 375document.querySelector('[name="viewport"]').setAttribute('content', `width=device-width, initial-scale=${scale}, user-scalable=no`)

用這種方式實(shí)現(xiàn)，會(huì)發(fā)現(xiàn)最后元素的尺寸數(shù)值固定為Iphone6設(shè)備中的像素值，只是做了元素的顯示縮放。

4、媒體查詢

媒體查詢可以根據(jù)不同的設(shè)備加載使用不同的css樣式渲染頁(yè)面，這種方式應(yīng)該結(jié)合flex布局，使用百分比作單位，或者結(jié)合其它UI框架例如:bootstrap，antd，elementUI等等，這些框架提供了一些內(nèi)置的類名方便控制不同設(shè)備大小的樣式。