移動端適配的幾種解決辦法

2021-10-21 20:07:38 字數 502 閱讀 9401

原則

開發時方便,寫**時設定的值要和標註的 160px 相關

方案要適配大多數手機螢幕,並且無 bug

使用者體驗要好,頁面看著沒有不適感 思路

寫頁面時,按照設計稿寫固定寬度,最後再統一縮放處理,在不同手機上都能用

按照設計稿的標準開發頁面,在手機上部分內容根據螢幕寬度等比縮放,部分內容按需要變化,需要縮放的元素使用 rem, vw 相對單位,不需要縮放的使用 px

固定尺寸+彈性布局,不需要縮放

viewport 適配

initial-scale = 螢幕的寬度 / 設計稿的寬度。一般設計稿的尺寸是實際開發尺寸的2倍。開發的時候根據設計稿/2即可。

const width = 750

const mobileadapter = () => , initial-scale=$, maximum-scale=$

移動端適配解決辦法

使用百分比自適應布局 流式布局 同時 設定 viewport 視口 即可達到適配目的 流式布局 就是百分比布局,非固定畫素,內容向兩側填充,理解成流動的布局,稱為流式布局 視覺視窗 viewport,是移動端特有的,這是乙個虛擬的區域,承載網頁的,他們的關係 瀏覽器承載viewport,viewpo...

幾種報錯的解決辦法

呼叫google api,缺失庫報錯 importerror no module named google 解決方案 出現這個錯誤,就是因為沒有安裝google api相應的庫,按照如下命令安裝即可,把庫名換成你所需要的相應的庫名即可 pip install google cloud speech ...

移動端ios遇到的問題及解決辦法

1.ios下margin失效的問題 1 設定html,body為100 2 給底部div設定固定定位,top為0 3 給上乙個兄弟元素設定padding bottom,就可以解決了。2.overflow auto 在ios下出現卡頓的問題 1 給滾動的元素 設定 webkit overflow sc...