H5響應式頁面制作

本篇內容介紹了“H5響應式頁面制作”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

　　H5響應式頁面制作

　　1.全屏式的頁面非常不適合響應式布局：

　　由于缺乏經驗,當初選擇用全屏滾動的響應式布局寫博客,實踐中發現由于ipad以及手機端的橫屏豎屏模式的存在,而全屏模式又使每一幀成為一屏幕,這樣對寬度與高度有著嚴格的比例要求,在如今手機款式五花八門的形態下,這種一幀要把所有內容全部展示出來的,可能只適合信息量比較少的頁面吧....

　　2.響應式css方面注意的問題：

　　在@media screen and (max-width||min-width)樣式區分截點的格式必須嚴格遵守,任何一個空格問題都會造成顯示錯誤.

　　將越小的設備css存越下面,不然會給你帶來麻煩.并且響應式頁面最小字體為12px.

　　將谷歌瀏覽器的控制臺放置在頁面右邊顯示,這樣大大提高響應式布局css的書寫效率.

　　rem單位最好的換算比例為625%,62.5%的換算會有誤差,特別是在pc端.

　　在高度范圍下有時候用px去寫死是不錯的選擇

　　3.js網頁部分：

　　對于5張網頁展示圖左右切換,由于上次bilibili經驗,老牛第一時間就想到了用insertAfter函數去控制圖的定位是最好的選擇,事先把對應div容器用css樣式寫好,那么在左右切換圖層的時候只要把對于的第一張圖或是最后一張圖的節點位置進行調整,配合上transition屬性,這樣無論是在代碼量以及性能上都是最好的選擇之一,唯一不足的就是兼容問題.這部分的重點在于焦點容器(最中間的)點擊是進行連接,左右兩張圖點擊則是移動,老牛思前想后,最后決定事先將所有的連接地址用數組存起來,由于目標層節點的index一直在改變,所以在初始化的時候就預先給每個容器加上其對應的class名+index值(這樣在之后無論節點如何變化,這個初始的class名中保留下的index值能與對應的鏈接掛鉤,不過現在讓我做的話可能我會選擇用data去保存),接下來全局用一個index值來控制焦點位子,每次移動把焦點位子加上用正則匹配class得來的鏈接地址,而其他的則去掉鏈接地址.

　　4.特效部分3d旋轉輪播：

　　如果光光為了實現一個3d旋轉不算什么難事,但是由于手機端的存在,3d旋轉在pc端豎直切割,而手機端將會橫向切割,并且所有的寬長度參數由于響應式的介入將都成為不確定因素,幾乎所有的值都是未知數,所以這部分的計算算是燒了我不少的腦細胞

　　值得注意的是,由于所有長寬不能寫死都需要計算而得,js在運算過程中小數點的誤差讓我吃盡苦頭...不過要是現在我可能會選擇用flex盒模型屬性去做!

“H5響應式頁面制作”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！