現在網上有很多自動制作h5宣傳頁的網站，可以通過傳圖，點幾下鼠標就可以制作一個集動畫、生產二維碼等各種功能於一身的h5微信宣傳頁。對於運營來講，非常方便，沒有技術門檻，不足之處就是只有特定的動畫效果，而且生成的h5帶有這個網站自己的logo也好，自己的打點代碼也好，總之，看個人愛好啦~
作為一個正在步入專業前端之列的專業前端工程師，怎么能不會手寫這么一個活動頁，不過這里面要注意的點還是很多的。
首先，自適應手機分辨率。
我們知道手機的種類特別多，分辨率也有很多種，更不用說長寬比了，有時候在iphone6上剛好撐滿屏幕的大小，但是放到安卓機甚至iphone低版本上，都有可能在手機上下兩個部位，或者左右兩邊產生白邊。如下圖，是常用640*1080的設計稿會出現的問題。但是如果換設計稿滿足高度，可以想象，在其他分辨率的手機上，左右會出現紅色的空隙。
對於這個問題，我們有三種解決方式：
1.給body設置相近顏色。
背景圖上下或者左右兩邊盡量不要漸變，這樣，我們給body設置成邊緣的顏色，可以有效的防止出現如此明顯的空隙。
2.背景圖用自動放大或縮小的方式。
在加載頁面的時候，先用js判斷屏幕的長和寬，window.innerWidth，window.innerHeight可以得出窗口的文檔顯示區，再量出設計稿的文檔大小如psdWidth，psdHeight；
var widthScale = window.innerWidth / psdWidth;
var heightScale = window.innerHeight/psdHeight;
這里widthScale，heightScale的就是背景圖片的縮放比例了，想要保證寬度的就是用widthScale來縮放，這樣上下會以body背景色填充；想要填滿的可以判斷widthScale和heightScale然后選個大的。
接着設置html5內容的容器的放大或者縮小值：
#h5content{ webkittransform:scale(0.7261904761904762);//scale即為計算出來的widthScale或者heightScale transform:scale(0.7261904761904762); -webkit-transform-origin:0 0; transform-origin:0 0; top:0px;
left:-26.38095238095238px; }
別忘了通過下面的代碼設置圖片的居中位置：
top: (window.innerHeight - uiHeight*scale)/2 + 'px';
left: (window.innerWidth - uiWidth*scale)/2 + 'px';
這種方式，以640*1008的設計稿為例，用scaleWidth回產生上下的白邊，用heightScale會造成背景圖片的拉扯。在實際過程中需要按情況考慮。
3.多套圖。
設計提供不同分辨率下的背景圖，通常是3套：iphone4,4s的640*960，5,5s的640*1136,6+的1242*2208，安卓機器以這三套圖的標准拉拉扯扯，留個小白邊就好。
其次，整體布局。
我們知道了如何適應不同的手機，接下來就是着手做h5了。
整個頁面是呈現在一個html上的，不同的頁面之間通過div的滑動模擬頁面切換。
這個地方並不麻煩，可以使用一些現成的插件，如swiper。
上圖的body包括兩部分，img和div#h5content:
1）img用來制做分享后顯示在描述左邊的小icon，放一個想辦法在當前頁面看不到的圖片就好，圖片大小要300*300以上。
2）h5content里面就是所有h5頁面的集合啦，一個頁面一個div，在這個div中，按照設計稿來制作相應頁面的事件和動畫。
注意：在這里如果對自適應要求很高的話，盡量使用圖片，因為其可以根據自身比例調整大小；不過一些文字，則需要使用百分比的方式進行自適應的位置及大小設定。還有，可以的話盡量把圖放在一張大圖上，減少請求數目。
加載頁面動畫
加載動畫可以監聽頁面圖片的load事件來設定,
jquery的load事件可以用來監聽圖片的加載完成，不過要注意的是，每一張圖片都會觸發這個事件，一定要做好判斷，等加載完最后一張的時候，把等待動畫去掉。
如：
var num = $('.bg img').length; $('.bg img').load(function(){ num--; if (num > 0) { return; } console.log('load compeleted'); }
js的onload事件也可以完成相應的功能。
以上就是制作一個h5移動端宣傳頁的必備知識啦，當然還有meta要帶上手機特定的那些設置，一些常用的美麗動畫要熟悉~~接下來就愉快的去做頁面吧。