移动端自适应_user-scalable=no-CSDN博客

一. 在HTML的头部加入meta标签

　　　　在HTML的头部，也就是head标签中增加meta标签，告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放，代码如下：

简单分析一下这一行代码的含义：width=device-width表示网页的宽度等于设备屏幕的宽度，initial-scale=1.0表示设置页面初始的缩放比例为1，user-scalable=no表示禁止用户进行缩放，maximum-scale=1.0 和 minimum-scale=1.0 表示设置最大的和最小的页面缩放比例。因为各大浏览器对meta标签的解析程度不一样，所以我们要尽可能的去兼容所有浏览器。

二. 百分比布局

　　　　在页面布局中，相对宽度和绝对宽度相结合来进行布局，将更有利于网页的可维护性。

　　　　下图分别是拉勾网在iPhone5、iPhone6和iPhone 6 Plus下的布局，可以看到随着设备的屏幕宽度不同，即使是同一套网页代码显示出来的字体大小以及间隔也都不一样。红线框内部分就是使用了百分比布局的做法，对于网页的可维护性将更好。

三. 响应式页面的实现

　　　　目前一般常见的实现响应式有两种方法，一种是利用媒体查询，另外一种是bootstrap下的栅格布局.

媒体查询，即 @media 查询，媒体查询可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。因为是设置样式，所以将媒体查询相关的代码放在css文件的最下方即可。

举例：实现了在不同的页面宽度中改变body的背景颜色的作用。

//如果页面宽度小于 300 像素,则修改body的背景颜色为红色:

@media screen and (max-width: 300px) { body { background-color:red; } }

//如果页面宽度大于 300 像素并且小于600像素，则修改body的背景颜色为绿色:

@media screen and (min-width: 300px) and (max-width:600px) {

body {

background-color:green;

}

//如果页面宽度大于 600 像素，则修改body的背景颜色为蓝色:

@media screen and (min-width: 600px) { body { background-color:blue; } }

注：screen 表示电脑屏幕，平板电脑，智能手机等，min-width和max-width 用于定义设备中页面的最小和最大宽度。

四. 页面使用相对字体

　　在我们平常的网页布局过程中经常使用绝对单位像素(px)来进行布局，这样的布局不适合我们自适应网页的实现，所以我们现在来介绍两种常见的相对单位em和rem。rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

　　1. 相对长度单位em

　　　　　　em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。

. 2. 相对长度单位rem

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

五. Js动态设置rem来实现移动端字体的自适应

js代码：利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用。

//获取html元素

var html = document.getElementsByTagName('html')[0];

//屏幕的宽度（兼容处理）

var w = document.documentElement.clientWidth || document.body.clientWidth;

//750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小

html.style.fontSize = w / 750 + "px";

六. 淘宝的lib-flexible插件

(1).在项目中安装lib-flexible

$ npm install lib-flexible --save

(2).在项目的入口js文件中引入lib-flexible