摘要：這個問題的解決方案有很多，個人覺得最簡單方面的還是大漠大大的一種解決方案。

先科普一下，HTML5并不是一項技術(shù)，而是一個標(biāo)準(zhǔn)。
所以其實要么我們是作為理論派討論HTML5標(biāo)準(zhǔn)，要么是作為實踐派討論HTML5標(biāo)準(zhǔn)在某瀏覽器的應(yīng)用。
H5 實際上是一個解決方案，一個看起來酷炫的移動端onepage網(wǎng)站的解決方案

移動端的適配方案

rem適配
優(yōu)點：

    1. 引用簡單，布局簡便
    2. 根據(jù)設(shè)備屏幕的DPR,自動設(shè)置最合適的高清縮放
    3. 有效解決移動端真實1px問題

但是絕不是每個地方都要用rem，rem只適用于固定尺寸！

在這里rem也是一種單位，并且可以為咱們的布局提供無線的變化，根據(jù)開發(fā)者的設(shè)定，它將會在不同的分辨率屏幕上展示不同的色彩。

這個單位的定義和em類似，不同的是em是相對于父元素，而rem是相對于根元素，當(dāng)我們指定一個元素的font-size為2rem的時候，也就說這個元素的字體大小為根元素字體大小的兩倍，如果html的font-size為12px，那么這個2rem的元素font-size就是24px。

    html {font-size: 12px;}
    h1 { font-size: 2rem; } 2*12 = 24px

    html {font-size: 16px;}
    h1 { font-size: 2rem; } 2*16 = 32px

單位	定義	特點
rem	font size of the root element	以根元素字體大小為基準(zhǔn)
em	font size of the element	以父元素字體大小為基準(zhǔn)

當(dāng)然上邊只是我們介紹rem簡單的示例，具體運用到項目中我還需進行rem的計算，根據(jù)根元素的font-size通過Javascript來計算我們的rem單位適配

選取一個設(shè)備寬度作為基準(zhǔn)，設(shè)置其根元素大小，其他設(shè)備根據(jù)此比例計算其根元素大小。比如使得iPhone6根元素font-size=16px。

設(shè) 備	設(shè)備寬度	根元素font-size/px	寬度/rem
iPhone5	320	計算	-
iPhone6	375	16	23.4375
iPhone7	375	16	23.4375
iPhone7plus	414	計算	-

根元素fontSize公式：width/fontSize = deviceWidth/deviceFontSize

下方為動態(tài)計算
  (function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + "px"
    }
    else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize)
    }
  }
  
  setBodyFontSize();
  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    console.log(rem)
    docEl.style.fontSize = rem + "px"
  }
  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit)
  window.addEventListener("pageshow", function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement("body")
    var testElement = document.createElement("div")
    testElement.style.border = ".5px solid transparent"
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines")
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

上方的代碼則是本人經(jīng)常使用的rem計算方法，我們可以根據(jù)我們自己的需求設(shè)定基于多大的屏幕以及rem的換算倍率等

百分比方案

使用百分比布局大部分是可行的，它會讓布局隨著屏幕的大小自動縮放，而且不用寫太多的css樣式，以及js相關(guān)的計算操作，但是文字就存在非常大的問題了，由于文字是固定大小，在屏幕dpr變化的時候，文字的CSS像素不變，就導(dǎo)致了文字在頁面中的占位發(fā)生了變化。這樣的結(jié)果就是，文字過多或者屏幕dpr過小的時候，會發(fā)生溢出；但是如果按照小屏幕為基準(zhǔn)，又會發(fā)生字體太小這種情況。
百分比在當(dāng)前移動端適配排版的時候，更多地會作為section級別元素的兼容排版。這個也要和設(shè)計稿中的效果相關(guān)，如果設(shè)計稿中要求一個元素定寬，那么就直接用px來保證寬度就可以了。

vw方案

vw也是css的單位，1vw相當(dāng)于1%，比如：瀏覽器視口尺寸為370px,那么 1vw = 370px * 1% =6.5px(瀏覽器會四舍五入向下取7)，
我們來看看vw的瀏覽器和手機的兼容性問題
瀏覽器

手機

在移動端 iOS 8 以上以及 Android 4.4 以上獲得支持，并且在微信 x5 內(nèi)核中也得到完美的全面支持
vw自身將整個可見視口橫向分成了100份，每一個單位就是1vw，這個單位最大的優(yōu)勢就是在移動端的時候，無論是豎屏或者橫屏，vw永遠都是針對于橫向的，比rem的方案好在當(dāng)屏幕大小發(fā)生變化（順便兼容了以后的可調(diào)節(jié)屏幕大小的移動設(shè)備[手動斜眼]）的時候，不會讓頁面崩掉。
對于移動設(shè)備來說，比如iphone6+的375pxCSS像素寬度，1vw就等于3.75px，通過這個單位可以解決上面的依賴于腳本綁定根元素font-size的問題，在豎屏和橫屏下面都有比較好的效果

$w-base: 375px
$w-base-design: 750px
@function px2vw($px)
    @return ($px / $w-base-design) * 100vw

雖然vw可以得到很好的支持，但是不會得到視覺稿原本的像素值了。在后期進行維護的時候會增加很多很多很多麻煩，前期打怪爽，后期裝備維護難

淘寶移動端適配方案

淘寶

移動端事件

click：單擊事件，類似于PC端的click，但在移動端中，連續(xù)click的觸發(fā)有200ms ~ 300ms的延遲
touchstart：手指觸摸到屏幕會觸發(fā)
touchmove：當(dāng)手指在屏幕上移動時，會觸發(fā)
touchend：當(dāng)手指離開屏幕時，會觸發(fā)
touchcancel：可由系統(tǒng)進行的觸發(fā)，比如手指觸摸屏幕的時候，突然alert了一下，或者系統(tǒng)中其他打斷了touch的行為，則可以觸發(fā)該事件

移動端常見問題

1px問題

   大家都知道我們再寫web端適配的時候還需要兼容ie瀏覽器，這是因為瀏覽器的內(nèi)核都不一樣，而且我們的屏幕大小，屏幕廠商也是不一樣，時常會發(fā)生缺少像素或者多像素現(xiàn)象，其實手機也一樣屏幕大小不一，瀏覽器也是各式各樣，拿iphone6為例，其dpr(device pixel ratio)設(shè)備像素比為2，css中一個1x1的點，其實在iphone6上是2x2的點,并且1px的邊框在devicePixelRatio = 2的Retina屏下會顯示成2px，在iPhone6 Plus下甚至?xí)@示成3px。

這個問題的解決方案有很多，個人覺得最簡單方面的還是大漠大大的一種解決方案。
使用postcss-write-svg插件

利用meta標(biāo)簽對viewport進行控制

2.刪除默認的蘋果工具欄和菜單欄

3.在web app應(yīng)用下狀態(tài)條（屏幕頂部條）的顏色 (iphone設(shè)備中的safari私有meta標(biāo)簽 ) 默認值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明） 若值為“black-translucent”將會占據(jù)頁面px位置，浮在頁面上方

4.允許全屏模式瀏覽 (iphone設(shè)備中的safari私有meta標(biāo)簽 )

5.禁止了把數(shù)字轉(zhuǎn)化為撥號鏈接 在iPhone上默認將電話號碼變?yōu)槌溄樱ㄋ{色字體）并且點擊這個數(shù)字還會自動撥號

6.ios click點擊事件延時300ms

7.移動端如何定義字體font-family

8.移動端字體單位font-size選擇px還是rem (new)

9.移動端touch事件(區(qū)分webkit 和 winphone) (new)

更多問題

webApp與響應(yīng)式區(qū)別

響應(yīng)式：
    設(shè)計通過CSS3的MQ（Media queries），使網(wǎng)頁在不同設(shè)備上都可以自動適應(yīng)，從而具有更加優(yōu)秀的表現(xiàn)效果。
    而且響應(yīng)式設(shè)計不僅用在移動網(wǎng)站，在PC端也有不同屏幕的適配，而且移動端和PC端可以只使用一套代碼，這就是全平臺的響應(yīng)式設(shè)計
Webapp：
    HTML5移動端（移動網(wǎng)站、混合應(yīng)用、WebAPP）為了解決屏幕適配經(jīng)常會使用響應(yīng)式設(shè)計（流式布局、CSS3媒體查詢），
    但是響應(yīng)式設(shè)計并不是必須，也可以使用流式布局和remnant來解決移動端的屏幕適配問題

meta標(biāo)簽

META標(biāo)簽，是在HTML網(wǎng)頁源代碼中一個重要的html標(biāo)簽。META標(biāo)簽用來描述一個HTML網(wǎng)頁文檔的屬性，例如作者、日期和時間、網(wǎng)頁描述、關(guān)鍵詞、頁面刷新等

作用

META標(biāo)簽是HTML標(biāo)記HEAD區(qū)的一個關(guān)鍵標(biāo)簽，它位于HTML文檔的和