app螢幕的適配方案

2021-10-04 23:18:42 字數 1316 閱讀 4003

1.首先做移動端頁面時引入的meta標籤,這裡的個個引數都是什麼意思,這個就不在這裡詳細說了,網上也有相應的資料可檢視,這裡主要說下引入適配的方案。

2、實現rem的第一種方式:

通過css3 media來實現,根據不同的裝置寬度和解析度來設定不同的font-size,以進行適配,**如下:

html

@media only screen and (min-width: 401px)

}@media only screen and (min-width: 428px)

}@media only screen and (min-width: 481px)

}@media only screen and (min-width: 569px)

}@media only screen and (min-width: 641px)

}

2.實現rem的第二種方式:

通過js來動態計算,獲取裝置的寬度,根據當前手機的不同手機螢幕尺寸和dpr(裝置畫素比)動態改變根節點html的font-size大小(基準值)。這裡有乙個公式:

rem= document.documentelement.clientwidth*dpr/10  

這裡的dpr如果你不懂,可以查下是什麼意思,另外以後我會陸續寫dpr的一些知識,詳細講術這個概念。

10指的font-size的基數我們以iphone5為例,手機屏寬度為320*2=640px。我們將其分成10份,得到font-size基準值rem=640/10=64px

這個是以640為基準備的一種方式,當然可以750為基礎。這些東西都取決於設計師給你的設計稿的大小,和你以哪個為基準來計算。

知道了這種原理以後我們就可以動手寫乙個適配的js了。不過現在手淘有現成的flexible.js,內容封裝的更全面,這個框架的原碼分析,我以後會專門寫部落格進行講述希望大家關注,今天主要講怎麼使用

第二種方法:直接載入阿里cdn檔案

檢視**裡設定的font-size大小的基礎。這個可以根據自己的專案要求更改。然後進行rem設定。

總結:上面講述了現在移動端所有的適配方案,不難看出,rem無疑是最好的選擇,對flexible.js內部**是怎麼封裝的,以後會詳細的解解釋,最後大家在開發過程跟據專案的需求選種不同的方式,比如一些簡單的應用也是可以用其他方式的。

移動端螢幕適配方案

物理畫素 解析度devicepixelratio layout viewport visual viewport ideal viewport 需要用到 meta viewport 中有6個通用屬性 移動頁面設計 480 854的比例 dpi 480 screen.width window.devi...

Android螢幕100 適配方案

計算裝置實際高度 基準寬高 private final static int standard width 1080 private final static int standard height 1920 48 實際裝置解析度 private float displaymetricswidth ...

Android 終極螢幕適配方案

我們都知道 android 碎片化問題令人痛心疾首,而造成的螢幕差異正式碎片化的問題中心。螢幕的尺寸從3英吋到10英吋,解析度從320到1920應有盡有,這對我們ui適配問題造成很大的困難。對於螢幕碎片化問題,android 官方推薦使用dp作為尺寸單位來適配ui,因此我們很有必要清楚px,dp,d...