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

先科普一下，HTML5并不是一項技術，而是一個標準。
所以其實要么我們是作為理論派討論HTML5標準，要么是作為實踐派討論HTML5標準在某瀏覽器的應用。
H5 實際上是一個解決方案，一個看起來酷炫的移動端onepage網站的解決方案

移動端的適配方案

rem適配
優點：

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

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

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

這個單位的定義和em類似，不同的是em是相對于父元素，而rem是相對于根元素，當我們指定一個元素的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	以根元素字體大小為基準
em	font size of the element	以父元素字體大小為基準

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

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

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

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

下方為動態計算
  (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))

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

百分比方案

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

vw方案

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

手機

在移動端 iOS 8 以上以及 Android 4.4 以上獲得支持，并且在微信 x5 內核中也得到完美的全面支持
vw自身將整個可見視口橫向分成了100份，每一個單位就是1vw，這個單位最大的優勢就是在移動端的時候，無論是豎屏或者橫屏，vw永遠都是針對于橫向的，比rem的方案好在當屏幕大小發生變化（順便兼容了以后的可調節屏幕大小的移動設備[手動斜眼]）的時候，不會讓頁面崩掉。
對于移動設備來說，比如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，但在移動端中，連續click的觸發有200ms ~ 300ms的延遲
touchstart：手指觸摸到屏幕會觸發
touchmove：當手指在屏幕上移動時，會觸發
touchend：當手指離開屏幕時，會觸發
touchcancel：可由系統進行的觸發，比如手指觸摸屏幕的時候，突然alert了一下，或者系統中其他打斷了touch的行為，則可以觸發該事件

移動端常見問題

1px問題

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

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

利用meta標簽對viewport進行控制

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

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

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

5.禁止了把數字轉化為撥號鏈接 在iPhone上默認將電話號碼變為超鏈接（藍色字體）并且點擊這個數字還會自動撥號

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

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

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

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

更多問題

webApp與響應式區別

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

meta標簽

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

作用

META標簽是HTML標記HEAD區的一個關鍵標簽，它位于HTML文檔的和