本篇內(nèi)容介紹了“H5響應(yīng)式頁面制作”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)主要從事網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)冠縣,十載網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

H5響應(yīng)式頁面制作

1.全屏式的頁面非常不適合響應(yīng)式布局：

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

2.響應(yīng)式css方面注意的問題：

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

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

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

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

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

3.js網(wǎng)頁部分：

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

4.特效部分3d旋轉(zhuǎn)輪播：

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

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

“H5響應(yīng)式頁面制作”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

分享名稱：H5響應(yīng)式頁面制作-創(chuàng)新互聯(lián)
文章起源：http://weahome.cn/article/codocd.html