重複5——7,直到上線。css
毫無疑問,既然是H5活動頁,固然要基於html5+css3+js;通常而言,對於活動頁來說,必然要具有如下功能:html
這個放在最上面。前端
vw+vh方案能實現同比縮放,但寬高拉長可能會很引起樣式的極端醜陋;有些分區較多的頁面,會出現樣式bug:
如iphoneX 和iPhone5 同比縮放效果炸裂。html5
建議使用:flex+px
px(或者基於固定px的rem)能夠確保區域的樣式固定;
彈性盒讓不一樣寬高的環境下,頁面的分區佈局獲得樣式保證;css3
若是時間很是充裕: 媒體查詢+多套樣式
若是時間足夠寬裕且本身想鍛鍊下生疏已久的佈局和css能力,那就開始自虐吧。web
產品、UI:各類花裏胡哨的特效往上懟才能顯示出咱們的專業。
前端:大家的心情我理解,可是這個'頁面進場空中轉體360並模擬賽亞人變身特效'是幾個意思?後端
固然,通常來說不多有這麼變態的需求,大可能是實現漸入漸出或者頁面滑出的效果。
針對這種頁面的專場需求,咱們既能夠用css3的過渡或者動畫本身去玩,也能夠引用很是好用的開源庫來實現,這裏推薦使用如下種方式:api
若是你的活動頁基於webApp或者web-native-app的話,常規來講,app/m站會給你提供分享功能的api。瀏覽器
h5的活動頁多數面向於登錄用戶(由於頁面可能會展現用戶的有關數據),所以在咱們的活動頁腳本的開頭,咱們就應該作出判斷。微信
//基於某api或接口數據判斷得出isLogin if(!isLogin){ //重定向至登陸頁 }else{ //進入咱們的loading或者動畫進場; }
除開上面提到的Animate.css,多數狀況下,咱們本身基於css3去實現就能夠了。css3提供了很強大的動畫功能,上手比較容易。
必定要把設計稿中的須要的數據弄明白,這點主要是後端的工做。
最要注意的是,不一樣環境下請求接口是否兼容(app/瀏覽器/微信/釘釘……),畢竟咱們寫的是h5,鬼知道用戶用什麼打開的咧。
對於靜態的頁面以及內容,能夠直接整個頁面切圖;若是有綁定事件的話,能夠寫透明盒子cover。
全文手打 散場丶丶