移動端字型設定rem。和相容。

2021-08-20 07:38:38 字數 971 閱讀 1758

一:做少部分手機適配可以用px。

二:當要適配各種手機端裝置時用rem。

*二:1.使用rem來設定web頁面的字型大小;

2.rem是相對於根元素;

3.rem能等比例適配所有螢幕

4.在根元素中定義了乙個基本字型大小為62.5%(也就是10px。設定這個值主要方便計算,如果沒有 

設定,將是以「16px」為基準 );

引入css**如下:

html@media screen and (min-width:321px) and (max-width:375px)}

@media screen and (min-width:376px) and (max-width:414px)}

@media screen and (min-width:415px) and (max-width:639px)}

@media screen and (min-width:640px) and (max-width:719px)}

@media screen and (min-width:720px) and (max-width:749px)}

@media screen and (min-width:750px) and (max-width:799px)}

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

***1rem=100px;

二:相容移動裝置;

插入js檔案   autofontsize.min.js    

(function(d,c)if(f>640)e.style.fontsize=100*(f/640)+"px"};if(!d.addeventlistener)c.addeventlistener(b,a,false);d.addeventlistener("domcontentloaded",a,false)})(document,window);

JS PC端設定rem 移動端設定rem

window.onresize function 頁面剛重新整理時呼叫 init function init const basesize 32function setrem 初始化 setrem window.onresize function 這裡是乙個pc和h5的 rem樣式 寫在了乙個htm...

移動端 處理rem根字型

在入口js檔案寫入以下方法 處理rem根字型 start 基準大小 const basesize 32 設定 rem 函式 function setrem 初始化 setrem 改變視窗大小時重新設定 rem window.onresize function 處理rem根字型 end 引入公用css...

移動端 處理rem根字型

在入口js檔案寫入以下方法 處理rem根字型 start 基準大小 const basesize 32 設定 rem 函式 function setrem 初始化 setrem 改變視窗大小時重新設定 rem window.onresize function 處理rem根字型 end 引入公用css...