移動端字型大小適配

2021-08-29 02:26:39 字數 521 閱讀 5515

接下來是個人的理解,網上的資料太雜太亂,得細心看才能找到精華。

css3字型有了「rem」單位,來解決螢幕適配問題。

它與px的區別:px設定了字型大小就不可變,rem是可以根據根元素html的字型的大小而變化的。

接下來就是用法:

原理:隨著html的font-size的變化,rem變化。

思路:只要我算出來不同螢幕字型比例大小就可以了。

vw是 viewport寬度, 1vw 等於viewport寬度的1%;vh是 viewport高度, 1vh 等於viewport高的的1%;

假設設計圖是根據iphone6來設計的,iphone6的寬度為375px,100vw(等於viewport寬度的100%)是螢幕的寬度,

100vw/3.75=100px;所以在這裡1rem=100px;

一些瀏覽器不支援font-size: calc(100vw/3.75); 所以js加一句$(「html」).css(「font-size」,(window.innerwidth)/3.75 + 『px』);

關於移動端簡單適配字型大小hostcss

採用flex rem的方式進行布局和完成移動端的適配host.js基於 flexible方案的 hotcss rem font size of the root element 是相對長度單位。相對於根元素 即html元素 font size計算值的倍數。適配原理 將px替換成rem,動態修改htm...

移動端適配

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 裝置寬度 設計搞寬...