5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

使用viewport标签

在HTML文档头部添加viewport标签，设置meta属性值为“width=device-width”，可以让浏览器根据设备屏幕的宽度自动调整页面的缩放比例，从而实现页面自适应。

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

每个属性的详细介绍：

使用CSS3媒体查询

媒体查询可以根据设备屏幕的宽度和高度来匹配不同的样式规则，从而实现响应式布局。通过设置不同的CSS样式，可以让页面在不同的设备上呈现不同的布局和样式。

@media screen and (max-width: 767px) {
  /* 在宽度小于767px的设备上应用以下样式 */
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 在宽度在768px到1023px之间的设备上应用以下样式 */
  body {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  /* 在宽度大于等于1024px的设备上应用以下样式 */
  body {
    font-size: 18px;
  }
}

使用弹性布局

弹性布局可以根据设备屏幕的宽度自动调整元素的大小和位置，从而实现页面自适应。通过设置元素的flex属性，可以让元素按照一定的比例分配剩余空间，从而实现页面的自适应性。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  flex: 1 1 300px;
  margin: 10px;
}

使用rem单位

rem单位是相对于根元素(html元素)的字体大小来计算的单位，可以根据设备屏幕的字体大小自动调整元素的大小和位置，从而实现页面自适应。通过设置根元素的字体大小，可以让整个页面的元素按照一定的比例进行缩放。

html {
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  /* 在宽度小于767px的设备上将根元素的字体大小设置为14px */
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 在宽度在768px到1023px之间的设备上将根元素的字体大小设置为16px */
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  /* 在宽度大于等于1024px的设备上将根元素的字体大小设置为18px */
  html {
    font-size: 18px;
  }
}

rem是CSS3新增的一个相对单位（root em，根em）,使用rem为元素设定字体大小时，是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

(其他)默认html的font-size是16px，即1rem=16px，如果某p宽度为32px你可以设为2rem。

通常情况下，为了便于计算数值则使用62.5%，即默认的10px作为基数。当然这个基数可以为任何数值，视具体情况而定。设置方法如下：

Html{font-size:62.5%(10/16*100%)}

具体不同屏幕下的规则定义，即基数的定义方式：可以通过CSS定义，不同宽度范围里定义不同的基数值，当然也可以通过js一次定义方法如下：

<script type="text/javascript">
   (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 = 20 * (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

使用vw、vh单位

vw和vh是根据设备的宽度和高度来决定的，设备的宽就是100vw，设备的高就是100vh，
你设置的50vw就是相当于设备宽度的50%，你设置的100vh就是相当于设备高度的100%。
切记：不要把vw和vh弄混淆了，如果你给元素宽度设置100vh，那么基本上(设备的宽小于高的情况)就会超出你的屏幕X轴出现滚动条。如果你给元素高度设置100vw，那么就满足不了你想要把这个元素铺满整个设备高度的愿望了。
一般情况下笔者宽度，和字体大小，左右边距间距等都是用vw单位，
高度，行高，上下边距间距等都是用vh单位。

使用方法：
1. 将设计图放到PS里面，查看整个图片的宽度和高度，分别放在设计稿宽度和设计稿高度当中。（注意是px单位哦）
2. 然后量出你想要量的地方，将宽度和高度分别放置到量出的宽度和量出的高度当中。（注意还是px单位哦）
3. 然后点击换算按钮，就可以将换算出来的宽度和高度大小放置到你的代码当中了哦。（注意是vw和vh单位哦）

一般移动端的布局可分为三个部分，头部->主体->tabbar的脚部。
所以我们可以把项目的外层这样设置一下：

.body {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* 头部部分 */
header {
	height: 10vh; /* 固定的高度，根据你的设计图调整 */
}
/* 主体部分 */
main {
	flex: 1; /* 占据页面剩余所有部分 */
}
/* tabbar脚部部分 */
footer {
	height: 10vh; /* 固定的高度，根据你的设计图调整 */
}

使项目中的字体大小自适应：