用rem实现h5页面的编写

可以使用rem来实现H5页面的自适应布局。Rem是指相对于根元素（html元素）字体大小的单位，可以根据设备的屏幕大小动态调整页面元素的大小。以下是使用rem实现H5页面自适应的基本步骤：

1. 设置html元素的字体大小为屏幕宽度的1/10，即1rem=屏幕宽度的1/10。可以使用CSS的calc()函数来实现，如下所示：

html {
  font-size: calc(100vw / 10);
}

2. 在样式表中使用rem来定义页面元素的尺寸，如下所示：

div {
  width: 10rem;
  height: 5rem;
  font-size: 1.5rem;
}

3. 在JavaScript中动态设置html元素的字体大小，以适应不同的屏幕大小。可以使用如下代码：

function setRem() {
  const html = document.querySelector('html');
  const width = html.getBoundingClientRect().width;
  html.style.fontSize = width / 10 + 'px';
}

// 页面加载时调用setRem函数
window.addEventListener('load', setRem);

// 窗口大小改变时调用setRem函数
window.addEventListener('resize', setRem);

通过以上步骤，就可以实现H5页面的自适应布局。使用rem可以让页面元素根据设备的屏幕大小自动调整，从而提升用户体验。