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; /* 固定的高度，根据你的设计图调整 */
}

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

机网页制作是相对于传统的电脑端网页而言的，二者在设计和使用上并没有太多的不同，主要是针对用户浏览界面的大小而量身订制的网页。电脑端显示器比较大，现在普及22英寸的显示器了，主流网页主体宽度一般不能少于1200像素，如果网页的主体宽度过窄会造成浏览器两边空白过多，严重影响用户视觉体验。而手机网站页面需要考虑不同尺寸的手机显示器的问题，一般可以按照自适应的方式来解决。移动端与电脑的最大不同是显示尺寸的问题，可以用布局单位像素和%来解决。

怎样做手机端网页才能确保专业、简洁、大气呢？

　　1、考虑使用网站二级域名

　　许多情况下手机的网站域名和PC端用的是同一个。过去往往为了图方便使用目录做为移动端页面的展示，域名和电脑端是同一个。这样的不利因素是一旦移动端网页被收录后用户在电脑上访问会展示手机浏览的效果，这样有可以会造成图片拉伸和变形。建议移动端使用二级域名。

　　2、合理应用HTML5+CCS3

　　H5页面与传统页面最大的不同是交互和特效，这也是各大浏览器淘汰Flash的主要原因。合理使用特效有利于提升网站用户体验，过多使用一方面会让设计实现变得的复杂，另一方面加大了网页加载的压力，所以说合理应用最重要，网页要炫更要快。

　　3、改变以往的设计习惯

　　过去我们做电脑端网页的时候要考虑主体网页的宽度，一般不超过1200px，它的单位是像素，还要考虑网页两边空间的视觉效果问题。移动端网页的设计与电脑端略有不同，设计单位使用百分比%，这样就可以兼容不同手机屏幕尺寸，不必考虑网页两边留白的问题。只要设计符合www规则，无非就是从大视野变成了不视角的问题。

　　4、要考虑手机网页加载快慢的问题

　　在设计方案手机版网站时，尽量避免的应用弹出窗口、flash、大文件等 ，载入这一类程序流程通常会较为用时耗总流量。主流浏览器已不再支持Flash了，所以尽量避免swf文件的调用。虽然现在5G时代了，但也要考虑网站的带宽问题，你手机流量和速度可能会很好，网站使用过多资源而服务器对外带宽又不高照样会影响网页打开速度。

　　5、重视不同手机效果调试

　　手机wap网站开发完成后尽可能使用不同品牌、不同屏幕尺寸、不同手机系统的移动端进行调试与检验，例如：安卓系统下的网页效果与苹果ios系统是不一样的，个别网页属性不见得都能兼容，所以说要多看多对比，发现问题及时处理，做到不同环境下的视觉效果统一性。