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

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

移動(dòng)端的適配方案

rem適配
優(yōu)點(diǎn)：

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

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

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

這個(gè)單位的定義和em類似，不同的是em是相對(duì)于父元素，而rem是相對(duì)于根元素，當(dāng)我們指定一個(gè)元素的font-size為2rem的時(shí)候，也就說這個(gè)元素的字體大小為根元素字體大小的兩倍，如果html的font-size為12px，那么這個(gè)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

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

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

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

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

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

下方為動(dòng)態(tài)計(jì)算
  (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ì)算方法，我們可以根據(jù)我們自己的需求設(shè)定基于多大的屏幕以及rem的換算倍率等

百分比方案

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

vw方案

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

手機(jī)

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

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

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

淘寶移動(dòng)端適配方案

淘寶

移動(dòng)端事件

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

移動(dòng)端常見問題

1px問題

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

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

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

2.刪除默認(rèn)的蘋果工具欄和菜單欄

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

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

5.禁止了把數(shù)字轉(zhuǎn)化為撥號(hào)鏈接 在iPhone上默認(rèn)將電話號(hào)碼變?yōu)槌溄樱ㄋ{(lán)色字體）并且點(diǎn)擊這個(gè)數(shù)字還會(huì)自動(dòng)撥號(hào)

6.ios click點(diǎn)擊事件延時(shí)300ms

7.移動(dòng)端如何定義字體font-family

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

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

更多問題

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

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

meta標(biāo)簽

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

作用

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