手機端H5開發,螢幕不同尺寸適配方法(螢幕自適應)

2021-10-10 05:26:00 字數 448 閱讀 7824

最近在接觸手機端h5開發,然後設計師將設計圖發給我們進行開發,對於第一次接觸詳細設計圖開發的我來說,覺得很新穎畢竟一直沒有接觸這麼正規的設計圖(字型樣式,顏色,大小等等),之後再開發的時候,就遇到了乙個難處。因為設計圖是按照px設計,所以以同等大小設計的樣式會影響整個頁面樣式。

與此同時發現手機端需要rem適配,所以開發時要將設計圖中的px轉換為rem來設計

下面的這段**就是px轉換rem的換算

我們需要設計圖的大小:

將下面的這段**放到你的css頁面內,其他寫樣式的時候換算就ok啦

html
最後換算結果為:10px=0.1rem

同時再介紹下字型引入的方法(先將字型包放到乙個檔案內)

/* 引入字型 */

@font-face

H5開發螢幕適配

width 設定layout viewport寬度,為乙個正整數,或者device width.height 設定layout viewport高度,為乙個正整數,或者device height initital scale 設定頁面的初始縮放值,為乙個數字,可以帶小數 maximum scale ...

移動端h5頁面不同尺寸螢幕適配相容方法

最近剛開始做移動端頁面,遇到了不少bug,說一下解決移動端不同螢幕頁面的適應問題。1.viewport屬性及html頁面結構 width 設定viewport寬度,為乙個正整數,或字串 device width height 設定viewport高度,一般設定了寬度,會自動解析出高度,可以不用設定 ...

h5適配手機

1 使用meta標籤,這也是普遍使用的方法,理論上講使用這個標籤是可以適應所有尺寸的螢幕的,但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 content中的 width 這個width指的是什麼寬度,我看過的文章對這個都沒有解釋的很清楚,有幾個...