移动端基本适配事件

<!DOCTYPE HTML>

<html>

<head>

<meta charset=“utf-8”>

<script>

（function（）{

　　fixwLayou（）;

　　windows.addEventListener('resize',fixwLayou);

　　function fixwLayou() {

　　　　const width = window.screen.width;

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


 






		

		
posted @ 
2019-04-28 13:40 
Omiturix 
阅读(320) 
评论(0) 
 
收藏 
举报