H5頁面（rem）

最近剛接手一個新活手機H5頁面（瀏覽器和微信打開），因爲時間緊任務急，快速在上網也看了一些資料，先簡單整理下實現過程、過程遇到的坑，及後來如何填的坑。畢竟是這方面的小白，可能存在些許偏差，有機會會繼續深度學習。

一.實現過程

1. 設置meta標籤

<meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
複製代碼

使用js給meta標籤賦值

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
複製代碼

2.肯定手機端視覺稿大小

設計稿寬度/100，例如我接收到視覺稿大小是375px * 665px,這裏求得的值就是3.75

3.使用js給html的font-size動態賦值，並監聽resize，再次調用給HTML的font-size賦值的方法

document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px';
複製代碼

4.在scss文件中，定義方法將px轉爲rem

@function torem($px){//$px爲須要轉換的字號
    @return $px / 100px * 1rem; //100px爲根字體大小
}
複製代碼

5. 按照設計稿中標註的寬度和高度，使用torem方法設置元素的屬性值

例如：

width:torem(24px);
height:torem(24px);
複製代碼

6. 頁面中的文字大小不建議使用torem方式處理，能夠結合css3媒介查詢來設置元素的文字大小

二.踩過的坑

這個h5頁面是用做宣傳推廣讓用戶註冊，因此就是簡單作的幾屏介紹頁面，中間內嵌了一個iframe註冊頁面，及最後的註冊成功頁面。 因此我就把它作成一個大長屏，經過判斷用戶上滑下滑來讓屏幕滑動到對應的第n屏，在幾屏最外層的容器上設置transform:translate()或者margin-top值,由於我貌似看到有說微信內置瀏覽器不必定對css3有很好的兼容性，因此我最終設置的是margin-top（要根據你的頁面佈局來）。

1.踩坑來了，在微信內置瀏覽中下滑與微信的默認動做衝突（針對android,ios沒有），解決方式: 監聽ontouchmove和ontouchend事件的元素的css中加上

touch-action: none;
複製代碼

說實話如今css真的是愈來愈強大了，開心~ 你說之後我就專一在css上有前途嘛？？？？？

2.iframe沒辦法響應手指的touch ,後來是在註冊頁面加的touch監聽,使用html5的postMessage解決的跨域，跨窗口消息傳遞是向上仍是向下滑動https://www.cnblogs.com/dolphinX/p/3464056.html

3.表單出現軟鍵盤時佈局錯亂

www.cnblogs.com/hellolm/p/4… 暫時就想起這麼多，純粹小白上路，可能會有誤差，還望不喜勿噴，(^__^) 嘻嘻……。