H5移动端自适应viewport标签设置_HTML5实现移动页面自适应手机屏幕的方法

H5移动端页面的自适应普遍采用的方法，从理论上分析，通过使用该标签，理论上应能适配各种屏幕尺寸，然而，由于不同设备对这一标签的解析方式和支持力度存在差异，导致其无法在所有浏览器或操作系统上实现兼容。

使用标签

在HTML文档的头部部分插入特定标签，并设定meta属性的值为“width=-width”，这样浏览器就能依据设备屏幕的实际宽度自动调整页面的缩放比例，进而实现页面的自适应功能。

每个属性的详细介绍：

该属性的宽度值，可设为一个具体的像素数值，例如：600像素，亦或是采用特定标识，比如：负宽度（即设备的宽度）。

：#的高度。

初始缩放比例，指的是浏览器在首次加载页面时设定的放大或缩小程度。

缩放功能的最大限制值，通常设定为1.0。

设置浏览者能够缩放的最小倍数通常为1.0，这一比例值通常被规定为最小可缩放级别。

user-：#浏览者是否可以手动缩放，yes或no。

使用CSS3媒体查询

媒体查询能够依据设备显示屏的尺寸，调整以适应多样化的样式规范，进而实现布局的适应性。通过配置多种CSS样式，页面能够在不同设备上展现出各自独特的布局与外观。

针对屏幕尺寸不超过767像素的设备，此样式规则将生效。
  /* 在宽度小于767px的设备上应用以下样式 */
  body {
    font-size: 14px;
  }
}
针对屏幕尺寸在768像素至1023像素之间的设备，此样式规则将生效。
针对屏幕宽度介于768像素至1023像素之间的设备，需使用以下样式规则。
  body {
    font-size: 16px;
  }
}
当屏幕宽度至少为1024像素时，{
  /* 在宽度大于等于1024px的设备上应用以下样式 */
  body {
    font-size: 18px;
  }
}

使用弹性布局

弹性布局能根据不同设备的屏幕宽度自动调整元素尺寸与布局，以此达到页面自动适配的效果。通过配置元素的flex属性，元素能够按照既定比例分配剩余空间，进而实现页面的自适应功能。

.container {
  display: flex;
  flex-wrap: wrap;
内容对齐方式：两端间隔平均分布；
}
.item {
  flex: 1 1 300px;
  margin: 10px;
}

使用rem单位

rem单位是以html根元素的字体大小为基准进行计算的尺寸单位，它能根据设备屏幕上字体大小的变化自动调整元素的大小与位置，以此达到页面自适应的效果。通过调整根元素的字体大小，整个页面的元素可以按照既定比例进行相应的缩放。

html {
  font-size: 16px;
}
@media screen and (max-width: 767px) {
当设备屏幕宽度低于767像素时，需将根元素字体尺寸调整为14像素。
  html {
    font-size: 14px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
针对屏幕宽度介于768像素至1023像素之间的设备，需将根元素的字体尺寸设定为16像素。
  html {
    font-size: 16px;
  }
}
@media screen and (min-width: 1024px) {
对于屏幕宽度至少为1024像素的设备，应将网页根元素的字体尺寸调整为18像素。
  html {
    font-size: 18px;
  }
}

rem是CSS3中引入的一种新单位，称为根em单位，它适用于元素字体大小的设定。这种单位采用相对大小，其参照基准是HTML文档的根元素。利用rem单位，我们只需调整根元素的字体大小，就能实现所有字体大小的成比例变化，同时还能有效防止字体大小在层层嵌套中产生连锁反应。

默认情况下，HTML中的字体大小设定为16像素，这意味着1个rem单位等于16像素。假如某个段落元素的宽度为32像素，那么你可以将其设置为2个rem单位。

一般情况下，为了方便进行数值计算，我们常采用62.5%这一比例，也就是将10像素作为基准值。当然，这个基准值并非固定不变，它可以根据实际情况进行调整。具体的设置步骤是：

在HTML中，字体大小被设置为62.5%，这一数值是通过将10像素除以16像素后乘以100%计算得出的。

具体到不同屏幕尺寸下的规则设定，亦即基数确定的方法：这可以通过CSS来实现，针对不同宽度区间设定相应的基数；或者，也可以通过的单次定义方式来完成。

使用vw、vh单位

vw与vh的数值是由设备的实际宽度和高度所决定的，其中设备的宽度对应100vw，而高度则对应100vh。

您所设定的50vw数值等同于设备屏幕宽度的半数，而100vh的设置则对应着设备屏幕高度的完整高度。

务必注意区分vw与vh这两个单位，若将元素的宽度设置为100vh，在设备宽度小于高度的情况下，很可能会在屏幕的X轴方向上出现滚动条。而若将元素的高度设置为100vw，则无法实现将元素完全覆盖设备高度的目的。

通常情况下，笔者的宽度、字体尺寸以及左右边距的间距等参数，均采用vw这一单位进行度量。

高度，行高，上下边距间距等都是用vh单位。

使用方法：

将设计图纸导入至软件中，仔细测量图片的横纵尺寸，并将这些数值分别对应到设计稿的横宽和纵高参数上。（务必注意，这里使用的是像素单位。）

接着，你需要测量你计划测量的区域，并将测得的宽度与高度分别对应到已测量的宽度和高度数值上。（切记，单位依然是像素。）

点击换算按钮后，您可以将计算得到的宽度和高度数值直接嵌入到您的代码中。请注意，这些数值应以vw和vh为单位。

一般移动端的布局可分为三个部分，头部->主体->的脚部。

所以我们可以把项目的外层这样设置一下：

.body {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* 头部部分 */
header {
高度设定为10vh；此值系固定，请根据您的具体设计图进行相应调整。
}
/* 主体部分 */
main {
	flex: 1; /* 占据页面剩余所有部分 */
}
/* tabbar脚部部分 */
footer {
	height: 10vh; /* 固定的高度，根据你的设计图调整 */
}

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

html {
    font-size: 16px;
}
针对屏幕尺寸至少为375像素的设备，此样式规则将生效。
    html {
iPhone6的屏幕尺寸以375像素为基准，每个像素点对应16像素；而414像素的屏幕上，每个像素点则对应18像素；至于600像素的屏幕，每个像素点则对应20像素。
字体大小设置为100%加上根据视口宽度与375像素的差值除以39再乘以2的结果。
字体大小设置为16像素，并根据视口宽度与375像素的差值按比例增加，具体计算公式为：16像素加上（100视口宽度减去375像素）除以39的结果。
    }
}
针对屏幕尺寸至少为414像素的设备，
    html {
字体宽度在414像素至1000像素之间，每增加100像素，字体大小相应提升1像素，具体范围从18像素增至22像素。
字体大小设置为112.5%加上根据视口宽度与414像素之差除以586的结果乘以4。
字体大小设置为：18像素加上（100视口宽度减去414像素）的结果除以586，再乘以4。
    }
}
针对屏幕尺寸至少为600像素的设备，{ }
    html {
限制宽度在600至1000像素之间，且每增加100像素，字体宽度相应提升1像素，范围在20至24像素之间。
字体大小设置为：125% 的基础上，再根据视口宽度与 600 像素之差，每超过 400 像素增加 4%。
字体大小设置为20像素，并根据视口宽度与600像素的差值，每增加400像素宽度，字体大小增加4像素。
    }
}
针对屏幕尺寸至少为1000像素的设备，{ }
    html {
        /* 1000px往后是每100像素0.5px增加 */
字体大小设置为137.5%的基准值，并根据视口宽度与1000像素的差值，每增加1000像素，字体大小额外增加6%。
字体大小设置为22像素，并根据视口宽度与1000像素的差值按比例增加，每增加1000像素，字体大小增加6像素。
    }
}