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

2021-08-21 03:18:39 字數 1178 閱讀 8244

採用flex+rem的方式進行布局和完成移動端的適配host.js
基於 flexible方案的 hotcss

rem(font size of the root element)是相對長度單位。

相對於根元素(即html元素)font-size計算值的倍數。

適配原理:將px替換成rem,動態修改html的font-size適配。

它可以很好的根據根元素的字型大小來進行變化,從而達到各種

螢幕基本一直的效果體驗

三行js**簡單適配

//得到手機螢幕的寬度

let htmlwidth = document.documentelement.clientwidth || document.body.clientwidth;

// 但頁面很大的時候,我們作的移動適配方案會呈現很大的字型,

//這不是我們想要的。所以加乙個判斷,解決頁面字型過大的問題。

if(htmlwidth >

750)

//得到html的dom元素

let htmldom = document.

getelementsbytagname

('html')[

0];//設定根元素字型大小

htmldom.style.fontsize= htmlwidth/20+

'px'

;然後監聽一下 視窗改變

參考小公尺官網

!

function

(n);

e.addeventlistener&&

(n.addeventlistener

(o,a,!1

),e.

addeventlistener

("domcontentloaded"

,a,!1)

)}(window)

;

按設計圖走

window.

onload

=function()

;window.

onresize

=function()

;function

getrem

(pwidth,prem)

移動端字型大小適配

接下來是個人的理解,網上的資料太雜太亂,得細心看才能找到精華。css3字型有了 rem 單位,來解決螢幕適配問題。它與px的區別 px設定了字型大小就不可變,rem是可以根據根元素html的字型的大小而變化的。接下來就是用法 原理 隨著html的font size的變化,rem變化。思路 只要我算出...

移動端簡單適配

rem 單位換算 定為 75px 只是方便運算,750px 75px 640 64px 1080px 108px,如此類推 vw fontsize 75 iphone 6尺寸的根元素大小基準值 function rem px 根元素大小使用 vw 單位 vw design 750 html medi...

移動端修改host

本地開發的時候使用pc端測試移動端,由於有安全網域名稱限制,因此在本地修改了機器的host。將網域名稱對映到本地區域網。這個做法是很正常的也很常見。但是現在新的需求是我需要在手機上也能夠正常測試啊!怎麼辦!手機又不能隨便修改host 那麼,我們換一種思路。用手機也連線上區域網,然後用pc 手機的流量...