移動端基本適配事件

時間 2020-06-08

標籤移動基本適配事件欄目無線简体版

原文原文鏈接

<!DOCTYPE HTML>html

<html>windows

<head>app

<script>htm

（function（）{ip

　　fixwLayou（）;utf-8

　　windows.addEventListener('resize',fixwLayou);rem

　　function fixwLayou() {it

　　　　const width = window.screen.width;io

　　　　const fixW = 750 //移動圖寬;

　　　　const scale = width / fixw;

　　　　const meta = document.createElement('meta');

　　　　meta.setAttribute('name','viewport');

　　　　meta.setAttribute('content','width =' fixW+',initial-scale='+scale+',maximum-scale='+scale+',user-scaleable=no');

　　　　document.head.appendChild(meta);

　　}

}）()

</script>

<style>

</style>

</head>

<body>

</body>

</html>

（2）

　　document.documentElement.style.FontSize = document.documentElement.clientWidth/7.5+'px';

　　這樣就設置好了每一個頁面的根fonts-size，由於rem單位是基於根font-size，所以只要肯定一種設計稿對應手機的換算，其他屏幕尺寸都可自動適配。

　　上面咱們得出設計稿換算rem的基準值是100，所以只須要把設計稿上的px值除以100即爲咱們要的rem值。

　　> Px/100=rem，因此100px=1rem,25px=0.25rem

React移動端適配生成方案：

以iPhone6 750px設計圖寬爲例，把視圖分紅7.5等份，每一份是100px。把100px做爲一個換算單位。100% 設備寬。100vw 是屏幕寬。100vw屏幕分紅7.5等份，每份爲100vw/7.5 = 13.3333vw. 同理，750px/7.5 = 100px,則13.3333vw = 100px.這裏寫html{　　font-size：13.3333vw；}那麼下面APP組件則能夠寫成.APP{　　width：1rem ; /*則實體寬100像素*/　　height: 1rem ; /*實體組件高100像素*/　　background-color：#ddd;}