CSS適配 App端適配

2022-06-26 12:15:07 字數 652 閱讀 8906

1、手機的響應式布局,所有的單位用rem來表示。

如:設計稿的寬度是750,則html標籤的font-size=螢幕寬度/7.5。那麼在網頁中的尺寸 = 設計高上實際的尺寸/100.

把下面的**作為乙個單獨的resize.js檔案,手機的頁面引用這個檔案。

$("html").css();

$(window).resize(function

());

});

2、移動端單位rem作為單位,一定要注意,換算後字型的px單位一定不能小於12px。不然的話,rem值非常小,字型還是會有12px的。當螢幕比較小,沒什麼影響,螢幕一大起來,字型就會變得很小,於其他的元素不統一了。

3、rem單位和em結合起來使用會更好。有字型的標籤裡高度、行高使用em的有點非常明顯。比如 : input標籤,裡面給文字設定大小,如果文字的高度比input高,溢位來的就會被切掉,字型只有一半。用em做單位就不會出現這種問題。基本上表單、**、button的高度都用em做單位比較好。

4、標籤的高度和文字的高度有比較明顯倍數關係,使用em作為單位,頁面的自適應會非常好。

5、手機端適配,開發的時候需要測試 機型(谷歌瀏覽器中的模擬手機)

a、iphone6

b、iphone5 

c、nexus5 

移動端適配JS和CSS

移動端適配一般是兩種方式 一js方式 setrem window.addeventlistener orientationchange setrem window.addeventlistener resize setrem function setrem js方式書寫方便,而且適配所有的機型,但是...

移動端適配

js適配方案 function resizefun else body removeclass hightscreen shortscreen portrait var ratio window width window height if screenstate portrait else if ...

移動端適配

不論裝置寬度是多少,統一把布局視口設定成設計稿的寬度。假設設計稿寬度是375px。不管螢幕多大,都看作375px。width只能改變布局視口,不能改變視覺視口。定義設計稿的寬度 計算當前裝置的寬度document.documentelement.offsetwidth scale 裝置寬度 設計搞寬...