1、使用meta标签：viewport

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

viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

viewport标签极其属性：

每个属性的详细介绍：

属性名 取值 描述
width 正整数 或 device-width 定义视口的宽度，单位为像素
height 正整数 或 device-height 定义视口的高度，单位为像素，一般不用
initial-scale [0.0-10.0] 定义初始缩放值
minimum-scale [0.0-10.0] 定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale [0.0-10.0] 定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable yes/no 定义是否允许用户手动缩放页面，默认值yes

2、使用css3单位rem

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

目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

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

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

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

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

3、使用媒体查询

媒体查询也是css3的方法，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生。

媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。

例如：如果浏览器窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

4、使用百分比

百分比指的是父元素，所有百分比都是这样的。子元素宽度50%，那么父元素的宽度就是100%；

所以body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。

在pc版网页(http://pc_url) 上，添加：

在移动版网页(http://mobile_url) 上，所需的注释应为:

之前的Meta标记（mobile agent）会继续沿用，但我们推荐使用HTMAL5语言制作的移动页面使用最新方案进行跳转适配，其它如xml语言的移动页跳转适配，需要继续使用之前的meta标记方式:

html5新增的移动适配写法如上,这个主要是为了百度等搜索引擎抓取到网站的移动端网址是什么,不是自动当设备切换到手机时自动跳转的.若实现自动跳转还需要js.

一般两种做法：后端渲染不同站点 / 前端适配

一般不那么要紧的，偏展示的接近静态的页面可以走前端适配。例如小红书这个。

前端适配两种：

• 借助JS动态渲染文档内容适配

• DOM一致，仅通过CSS媒体查询做不同样式

Henry Here。这个就是个纯CSS的适配，可以注意观察不同屏幕宽度下元素的展现/隐藏，和下面那堆盒子的排布。

一般大型网站，关键页面，对PC、移动端UI设计要求很高的，页面逻辑重，需要针对两端优化的，都是要做两套的。例如百度文库：https://wenku.baidu.com

这个地址PC打开和wap打开渲染的完全是两套东西，甚至域名都重定向了。

可以理解为两个网站，一个针对PC做，一个针对wap做，后端通过判断useragent觉得给你哪个站点.

1、使用meta标签：viewport

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

viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

一般两种做法：后端渲染不同站点 / 前端适配

一般不那么要紧的，偏展示的接近静态的页面可以走前端适配。例如小红书这个。

前端适配两种：

• 借助JS动态渲染文档内容适配

• DOM一致，仅通过CSS媒体查询做不同样式

Henry Here。这个就是个纯CSS的适配，可以注意观察不同屏幕宽度下元素的展现/隐藏，和下面那堆盒子的排布。

一般大型网站，关键页面，对PC、移动端UI设计要求很高的，页面逻辑重，需要针对两端优化的，都是要做两套的。例如百度文库：https://wenku.baidu.com

这个地址PC打开和wap打开渲染的完全是两套东西，甚至域名都重定向了。

可以理解为两个网站，一个针对PC做，一个针对wap做，后端通过判断useragent觉得给你哪个站