移動端自適應所有螢幕的動態方法

2021-09-30 18:48:34 字數 911 閱讀 3468

原文:

js動態計算rem**:(此**適配所有手機端)

1. 750的設計稿:

(function();

rem = a / 7.5;

r.style.fontsize = rem + 'px';

}; var t;

w();

window.addelementlistener('resize',function(),false);

})();

2.   任意尺寸的設計稿(自適應)

假設設計稿的寬度為***px;

(function () , c = null;

window.addeventlistener("resize", function () );

a();

})();

解釋一下第二個**中的  b.style.fontsize = (a /***) *100+ "px";

假設a=800,***=1000,也就是設計稿的寬度為1000px,(移動端的)螢幕寬800px;

要對應比例還要適配移動端,那麼,設計稿上的1px在移動端上就是0.8px;這個0.8是(a /***)計算得來的。

而總不能每次測量的長度都乘以0.8吧?這豈不是要累死?這時,就用到了rem。

給html乙個font-size:0.8px;這時移動端的1rem就等於設計稿的1px;

而chrome瀏覽器,最小字型不得小於12px;

把字型放大100倍即可。就是:(a /***)*100

設定html   font-size: (a /***)*100 px;就可以來什麼屏適應什麼屏,pc瀏覽器開啟這種網頁的話網頁尺寸會隨著瀏覽器視窗寬度的改變而改變

原文: 

寫移動端自適應螢幕的方法

前端移動端開發的時候肯定是會面對不同型號的手機的頁面展示問題的,今天給大家推出另外一種自適應不同移動端的方法,使用vw,vh單位。vw和vh單位的大小是多少?vw和vh是根據裝置的寬度和高度來決定的,裝置的寬就是100vw,裝置的高就是100vh,你設定的50vw就是相當於裝置寬度的50 你設定的1...

移動端螢幕自適應(筆記)

首先單位自適應,使用rem做單位,rem根據根標籤來決定,若html的font size為50px 那麼1rem就是50px 然後我們在根據螢幕大小來給html定義font size 把以下 寫到index.html中 fnresize window.onresize function functi...

移動端自適應不同大小的螢幕

utf 8 format detection content telephone no content no viewport content user scalable no,initial scale 1,maximum scale 1,minimum scale 1,width device ...