H5頁面自適應各種手機端螢幕解析度的大小

2021-09-24 17:42:16 字數 759 閱讀 8130

之前寫h5註冊頁的時候,總是適配不好,用過**查詢,但是效果不太好,而且要適配的尺寸太多了,總歸有遺漏的,時長達不到ui設計圖的標準,後來在網上找了一篇適配的js**,但是因為不太明白,所以使用的也不好哈哈,現在算是明白了點,故將**放上 原文出處:

; (function (designwidth, maxwidth) ';

}if (docel.firstelementchild) else

//要等 wiewport 設定好後才能執行 refreshrem,不然 refreshrem 會執行2次;

refreshrem();

win.addeventlistener("resize", function () , false);

win.addeventlistener("pageshow", function (e)

}, false);

if (doc.readystate === "complete") else , false);

}})(1080, 1920);

最後有兩個引數是需要手動調整的,分別是 設計稿的寬度和最大寬度,我這裡設計稿的寬度是1080,然後給他設定的最大寬度是1920,設定好之後就可以隨心所欲地使用rem了哈哈

比如說量的尺寸是距離頂部882px,我們可以這樣寫top:8.82rem,原尺寸除以100就可以了,這段**要放在頭部script標籤的最前面

手機端h5頁面介面分功能

今天寫程式遇到了手機端的分頁問題,以前沒遇到過類似問題,pc端的分頁都是有幾個按鈕,可以自主選擇分頁。但是手機端的之前沒遇到過,後來的解決方案是加了乙個loading的gif,然後看完一頁之後先載入loading,然後等到介面請求成功之後,顯示介面請求的內容,把loading圖示隱藏。如此反覆,知道...

h5頁面的寫法 移動端h5頁面寫法

1.頁面寬度320,所有元素尺寸設一半 缺點 不自能適應全屏 2.頁面寬度640,元素尺寸正常 暫未發現問題 3.頁面寬度640,js控制自適應全屏 adaptuilayout.adapt initviewportwidth 缺點 qq空間分享後點開頁面套在qq預設瀏覽器裡有相容性問題 4.rem寫...

移動端h5頁面適配

一直對h5頁面充滿崇敬,揣著忐忑的心開始了我的h5之旅。才發現直接照抄網上的方案是很容易,但是想真的了解內部的原理,這就給我了乙個下馬威了.通過在網上各種找資料,才將各種概念以及原理了解清楚.故寫下這篇文章用於積累知識,如有問題,歡迎指正 先來看看很多資料上面的描述 它是物理概念,指的是裝置中使用的...