移动端(rem)自适应相关随笔

本文链接：https://blog.youkuaiyun.com/qq_41454366/article/details/93621032

背景：
近一段时间在做移动端h5的开发，因此需要考虑到适应各种设备下的显示效果。经过学习总结以下，作为记录备忘。

首先说一下rem单位的属性；

rem是一个相对单位，是相对根元素(<html>)字体大小的单位。

此方案是通过js初始化不同设备下html的font-size的大小。
如果UI设计初稿的宽为375px，那么就可以在设备宽度为375px的视图下进行开发，比如谷歌浏览器下的iphone6/7/8，因为这样就会得到1rem=100px；至于为什么要设置成1rem = 100px;
我认为主要是为了方便计算，比如一个div的宽为120px;那么就可以写成1.2rem;

了解之后，那么rem单位到底如何使用？

一、首先应该在<head>中设置 viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" >

width - viewport的宽度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

二、然后将以下js代码也复制到<head>中，以动态设置html标签的font-size，从而达到rem自适应的效果；

<script type="text/javascript">
	document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 100 + 'px';
</script>

以上代码根据rem的公式 1rem = 屏幕宽度 / UI设计图宽度 * 100px得出；
如果你的设计初稿宽度为320px的话，将 375 更改为 320 既可，其他宽度同理。
三、再设置<style>

  body {
       font-size: 0.16rem;
       margin: 0;
       padding: 0;
  }

目的是为了让页面字体的大小默认为 0.16rem = 16px;

如果需要页面大小发生变化时页面内容比例保持不变的话，可以将代码片段写到 window.onresize = function(){ }里。
在这里插入图片描述
设置好之后应该是这种效果。接下来就可以使用rem来进行页面布局了。现在来举个栗子。
假设有一个div的宽度和高度都是160px;就可以设置其css为

width: 1.6rem;
height: 1.6rem;
background-color: red;

这样的话他在宽度为375的设备上显示效果就是
在这里插入图片描述
在宽度为320px的设备上效果为

该div在不同设备上所占的比例是相同的，这样就达到了不同设备上的自适应。
本方案仅初步实现移动端自适应的效果。并未进行详细优化，比如不同设备像素比（DPR）下图片清晰度的处理等。

首次尝试写一些东西，如有错误还请各位指出。感谢

2020年6月3日追加阿里高清方案

	<script>
		(function(doc, win) {
			var docEl = doc.documentElement,
				resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
				recalc = function() {
					var clientWidth = docEl.clientWidth;
					if(!clientWidth) return;
					docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
				};
			if(!doc.addEventListener) return;
			win.addEventListener(resizeEvt, recalc, false);
			doc.addEventListener('DOMContentLoaded', recalc, false);
		})(document, window);
	</script>