移动端基本适配事件

时间 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;}