面试问题总结

面试了两家公司，第一家没有笔试直接面试，第二家笔试+面试，将记得住的问题记录下来，答案自己找的，有好的答案欢迎提出。

1、响应式布局

一家公司问了em和rem的区别，另一家公司先问了一下px,em,rem的区别，然后又问是否熟悉响应式布局

（1）px,em,rem的区别

px:像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。实际上只需要知道em是相对于父元素的就行了，父元素字体大小是10px，1em就等于10px。

rem也是相对长度单位，但相对的只是HTML根元素

目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。

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

（2）响应式布局

流式布局%，em,rem，弹性布局flex都属于响应式布局,当然最出名的是媒体查询

流式布局和弹性布局及配合媒体查询是响应性布局的最好方式。

详情参考手把手教你响应式布局（一）

2、两栏布局，一侧固定一侧自适应的几种方式

<div class="wrapper" id="wrapper"><div class="left">左边固定宽度，高度不固定 </br> </br></br></br>高度有可能会很小，也可能很大。</div><div class="right">这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>基本的样式是，两个div相距20px, 左侧div宽 120px</div>
</div>

（1）基本方法

.wrapper {padding: 15px 20px;border: 1px dashed #ff6c60;
}
.left {width: 120px;border: 5px solid #ddd;
}
.right {margin-left: 20px;border: 5px solid #ddd;
}

（2）float方法

.wrapper-float {overflow: hidden;        // 清除浮动
}.wrapper-float .left {float: left;
}.wrapper-float .right {margin-left: 140px;
}

（3）使用float+BFC方法

.wrapper-float-bfc {overflow: auto;
}.wrapper-float-bfc .left {float: left;margin-right: 20px;
}.wrapper-float-bfc .right {margin-left: 0;overflow: auto;
}

（4）使用absolute+margin-left方法

.wrapper-absolute .left {position: absolute;
}.wrapper-absolute .right {margin-left: 150px;
}

(5)flex方案

.wrapper-flex {display: flex;align-items: flex-start;
}.wrapper-flex .left {flex: 0 0 auto;
}.wrapper-flex .right {flex: 1 1 auto;
}

需要注意的是，flex容器的一个默认属性值:align-items: stretch;。这个属性导致了列等高的效果。
为了让两个盒子高度自动，需要设置: align-items: flex-start;

参考：七种实现左侧固定，右侧自适应两栏布局的方法

3、h5废弃的标签和属性及新增的标签和属性

4、浏览器的内核有哪些

1、IE浏览器内核：Trident内核，也被称为IE内核；

2、Chrome浏览器内核：Chromium内核 → Webkit内核 → Blink内核；

3、Firefox浏览器内核：Gecko内核，也被称Firefox内核；

4、Safari浏览器内核：Webkit内核；

5、Opera浏览器内核：最初是自主研发的Presto内核，后跟随谷歌，从Webkit到Blink内核；

5、box-sizing有哪几种

box-sizing: content-box | border-box | inherit;

6、通过原生js和jQuery获取元素的区别

jQuery获取的是jQuery对象，原生js获取到的是DOM元素

7、工作中的增删改查是哪些方法

JS数组操作之增删改查的简单实现

新增一条数据，编辑原有数据，删除数据，查询数据

8、Vue的生命周期有哪些，页面挂载之前beforecreated到mounted使用的区别

beforeCreate（创建前）,created（创建后）,beforeMount(载入前),mounted（载入后）,beforeUpdate（更新前）,updated（更新后）,beforeDestroy（销毁前）,destroyed（销毁后）

beforecreated：el 和 data 并未初始化 
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化 
mounted ：完成挂载

beforecreate : 举个栗子：可以在这加个loading事件 
created ：在这结束loading，还做一些初始化，实现函数自执行 
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy： 你确认删除XX吗？ 
destroyed ：当前组件已被删除，清空相关内容

9、你做过哪些性能优化

一、减少HTTP请求

CSS Sprites直译过来就是CSS精灵

在可以大量使用字体图标的地方我们可以尽可能使用字体图标，字体图标可以减少很多图片的使用，从而减少http请求，字体图标还可以通过CSS来设置颜色、大小等样式

合并脚本和样式表：将多个样式表或者脚本文件合并到一个文件中，可以减少HTTP请求的数量从而缩短效应时间。

然而合并所有文件对许多人尤其是编写模块化代码的人来说是不能忍的，而且合并所有的样式文件或者脚本文件可能会导致在一个页面加载时加载了多于自己所需要的样式或者脚本，对于只访问该网站一个（或几个）页面的人来说反而增加了下载量，所以大家应该自己权衡利弊

二、使用CDN

三、添加Expires头

页面的初次访问者会进行很多HTTP请求，但是通过使用一个长久的Expires头，可以使这些组件被缓存，下次访问的时候，就可以减少不必要的HTPP请求，从而提高加载速度。

Web服务器通过Expires头告诉客户端可以使用一个组件的当前副本，直到指定的时间为止。例如：

Expires: Fri, 18 Mar 2016 07:41:53 GMT

Expires缺点：它要求服务器和客户端时钟严格同步；过期日期需要经常检查

HTTP1.1中引入Cache-Control来克服Expires头的限制，使用max-age指定组件被缓存多久。

Cache-Control： max-age=12345600

若同时制定Cache-Control和Expires，则max-age将覆盖Expires头

四、压缩组件

从HTTP1.1开始，Web客户端可以通过HTTP请求中的Accept-Encoding头来表示对压缩的支持

Accept-Encoding: gzip,deflate

如果Web服务器看到请求中有这个头，就会使用客户端列出来的方法中的一种来进行压缩。Web服务器通过响应中的Content-Encoding来通知 Web客户端。

Content-Encoding: gzip

五、将样式表放在头部

首先说明一下，将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。

我们总是希望页面能够尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来说是很重要的。

将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的行为：如果样式表仍在加载，构建呈现树就是一种浪费，因为所有样式表加载解析完毕之前务虚会之任何东西

六、将脚本放在底部

更样式表相同，脚本放在底部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现。

js的下载和执行会阻塞Dom树的构建（严谨地说是中断了Dom树的更新），所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。

下载脚本时并行下载是被禁用的——即使使用了不同的主机名，也不会启用其他的下载。因为脚本可能修改页面内容，因此浏览器会等待；另外，也是为了保证脚本能够按照正确的顺序执行，因为后面的脚本可能与前面的脚本存在依赖关系，不按照顺序执行可能会产生错误。

七、使用外部的JavaScript和CSS

内联脚本或者样式可以减少HTTP请求，按理来说可以提高页面加载的速度。然而在实际情况中，当脚本或者样式是从外部引入的文件，浏览器就有可能缓存它们，从而在以后加载的时候能够直接使用缓存，而HTML文档的大小减小，从而提高加载速度。

影响因素：

1、每个用户产生的页面浏览量越少，内联脚本和样式的论据越强势。譬如一个用户每个月只访问你的网站一两次，那么这种情况下内联将会更好。而如果该用户能够产生很多页面浏览量，那么缓存的样式和脚本将会极大减少下载的时间，提交页面加载速度。

2、如果你的网站不同的页面之间使用的组件大致相同，那么使用外部文件可以提高这些组件的重用率。

八、精简JavaScript

移除不必要的空白字符（空格，换行、制表符），这样整个文件的大小就变小了。

一般来说，压缩产生的节省是高于精简的，在生产环境中，精简和压缩同时使用能够最大限度的获得更多的节省。

CSS的精简

CSS的精简带来的节省一般来说是小于JavaScript精简的，因为CSS中注释和空白相对较少。

除了移除空白、注释之外，CSS可以通过优化来获得更多的节省：

合并相同的类；

移除不使用的类；

九、避免重定向

当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载。

来看一个实际例子：对于ASP.NET webform开发来说，对于新手很容易犯一个错误，就是把页面的连接写成服务器控件后台代码里，例如用一个Button控件，在它的后台click事件中写上：Response.Redirect("")；然而这个Button的作用只是转移URL，这是非常低效的做法，因为点击Button后，先发送一个Post请求给服务器，服务器处理Response.Redirect("")后就发送一个302响应给浏览器，浏览器再根据响应的URL发送GET请求。正确的做法应该是在html页面直接使用a标签做链接，这样就避免了多余的post和重定向。

参考：Web前端性能优化——如何提高页面加载速度

10、截取字符串的方法有哪些？参数的区别？

slice(start,[end])

第一个参数代表开始位置,第二个参数代表结束位置的下一个位置,截取出来的字符串的长度为第二个参数与第一个参数之间的差;若参数值为负数,则将该值加上字符串长度后转为正值;若第一个参数等于大于第二个参数,则返回空字符串...

substring(start,[end])

第一个参数代表开始位置,第二个参数代表结束位置的下一个位置;若参数值为负数,则将该值转为0;两个参数中,取较小值作为开始位置,截取出来的字符串的长度为较大值与较小值之间的差.

substr(start,[length])

第一个参数代表开始位置,第二个参数代表截取的长度

函数：split()
功能：使用一个指定的分隔符把一个字符串分割存储到数组
例子：

str=”jpg|bmp|gif|ico|png”;
arr=theString.split(”|”);
//arr是一个包含字符值”jpg”、”bmp”、”gif”、”ico”和”png”的数组

函数：John()
功能：使用您选择的分隔符将一个数组合并为一个字符串
例子：

var delimitedString=myArray.join(delimiter);
var myList=new Array(”jpg”,”bmp”,”gif”,”ico”,”png”);
var portableList=myList.join(”|”);
//结果是jpg|bmp|gif|ico|png

function func(s, n) {return s.slice(0, n).replace(/([^x00-xff])/g, “$1a”).slice(0, n).replace(/([^x00-xff])a/g, “$1″);}

11、改变this指向的方法有哪些？call和apply的区别

call方法:
语法：call(thisObj，Object) //对象，参数集
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
apply方法：
语法：apply(thisObj，[argArray]) //对象，数组
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj，并且无法被传递任何参数。

call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同.

$.proxy(fn,context)改变this的指向 fn必须是一个函数

ES5还定义了一个方法：bind()

js改变this指向方法call,apply;jq改变this指向方法$.proxy()

12、知道哪些ES6语法，解构赋值数组和对象的区别？

ES6常用知识总结（20%的知识占80%的份额）

数组以序列号一一对应，这是一个有序的对应关系。
而对象根据属性名一一对应，这是一个无序的对应关系，属性名一致即可。根据这个特性，使用解析结构从对象中获取属性值更加具有可用性。

13、你对jQuery优化有哪些建议？

1、总是使用#id去寻找element. 在Classes前面使用Tags

2、缓存jQuery对象，可以用逗号隔开一次定义多个本地变量，这样可以节省一些字节。

3、更好的利用链

4、事件委托（又名：冒泡事件）

5、遵从$(windows).load

参考：jQuery代码性能优化的10种方法

14、AMD和CMD

AMD：即Asynchronous Module Definition，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范。由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是大名鼎鼎RequireJS，实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。

requireJS主要解决两个问题

1、多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
2、js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

require([dependencies], function(){});
require()函数接受两个参数

第一个参数是一个数组，表示所依赖的模块
第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块

require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

CMD：即Common Module Definition通用模块定义，CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS一样，只不过在模块定义方式和模块加载（可以说运行、解析）时机上有所不同

前端模块化，AMD与CMD的区别

15、如何创建一个对象，划出内存图

一、原始方法

通过new关键字生成一个对象，然后根据JavaScript是动态语言的特性来添加属性和方法，构造一个对象。其中的this表示调用该方法的对象。

二：工厂方法（构造函数）

<script>function Person(name,age){this.name = name;this.age = age;this.showName = function () {console.log(this.name);};this.showAge = function () {console.log(this.age);};}var obj1 = new Person("Kitty","21");var obj2 = new Person("Luo","22");obj1.showName();//Kittyobj1.showAge();//21
 obj2.showName();//luoobj2.showAge();//22
</script>

工厂方法为每个对象都创建逻辑相同的方法，很浪费内存。

三：混合的构造函数/原型方式

<script>function Person(name,age){this.name = name;this.age = age;this.array = new Array("Kitty","luo");}Person.prototype.showName = function (){console.log(this.name);};Person.prototype.showArray = function (){console.log(this.array);};var obj1 = new Person("Kitty",21);var obj2 = new Person("luo",22);obj1.array.push("Wendy");//向obj1的array属性添加一个元素
 obj1.showArray();//Kitty,luo,Wendyobj1.showName();//Kittyobj2.showArray();//Kitty,luoobj2.showName();//luo
</script>

四：动态原型方法

<script>function Person(name,age){this.name = name;this.age = age;this.array = new Array("Kitty","luo");//如果Person对象中_initialized 为undefined，表明还没有为Person的原型添加方法if(typeof Person._initialized  == "undefined"){Person.prototype.showName = function () {console.log(this.name);};Person.prototype.showArray = function () {console.log(this.array);};Person._initialized = true;}}var obj1 = new Person("Kitty",21);var obj2 = new Person("luo",22);obj1.array.push("Wendy");//向obj1的array属性添加一个元素
 obj1.showArray();//Kitty,luo,Wendyobj1.showName();//Kittyobj2.showArray();//Kitty,luoobj2.showName();//luo
</script>

参考：JavaScript如何创建一个对象

16、new具体做了哪些事情

var fn = function () { };
var fnObj = new fn();

（1）创建一个空对象

var obj = newobject();

（2）设置原型链

obj._proto_ = fn.prototype;

原型链：三张图搞懂JavaScript的原型对象与原型链

（3）让fn的this指向obj，并执行fn的函数体

var result = fn.call(obj);

（4）判断fn的返回值类型，如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。

if (typeof(result) == "object"){  fnObj = result;  
} else {  fnObj = obj;
}

new 操作符具体干了什么？

创建一个新的对象
将构造函数的作用域赋值给新对象（this执行新的对象）
执行构造函数的代码
返回新的对象

17、CSS3有哪些新特性，如何兼容CSS3和H5新标签？

CSS3新特性：

border-radius
box-shadow
border-image
text-overflow
@font-face 规则
//2D转换
translate()
rotate()
scale()
skew()
matrix()
//3D转换
rotateX()
rotateY()

 渐变：linear-gradient、radial-gradient
 transition  //过渡@keyframes   animation   //动画

//多列
column-count    //多少列
column-gap    //列的间隙
//多列边框
column-rule-style
column-rule-width
column-rule-color
column-rulecolumn-span   //元素跨越多少列
column-width  //列宽

box-sizing
Flex Box
@media  CSS3 根据设置自适应显示
@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}

CSS3兼容写法： -webkit-, -ms- （IE）或 -moz- （FF），-o-

IE8浏览器中还没有添加对HTML5新标签的支持，所以在IE8中无法直接展现HTML5新标签中的内容。庆幸的是IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，代码如下：

var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){document.createElement(e[i])
}

浏览器支持新标签后，还需要添加标签默认的样式：
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}

参考：关于H5新标签的浏览器兼容问题的详解

18、doctype声明，严格模式和混合模式是什么，意义？

放在网页顶部的doctype声明是让浏览器进入正确呈现模式的关键。浏览器自动切换到恰当的呈现模式，以便正确显示由doctype声明所指定的文档种类。

doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是W3C所发布的一个文档类型定义（DTD）中包含的规则。

DOCTYPE声明作用及用法详解

19、浏览器常见兼容问题

1：不同浏览器的标签默认的外补丁和内补丁不同

解决方案：css里 *{margin:0;padding:0;}

2：图片默认有间距

解决方案：使用float属性为img布局

3：透明度的兼容css设置

最全整理浏览器兼容性问题与解决方案、常见的浏览器兼容性问题总结

20、定位有哪些

static：默认值，块级元素和行内元素按照各自的特性进行显示

relative:相对定位,元素相对于原本位置的定位，元素不脱离文档流，位置会被保留，其他的元素位置不会受到影响，不会改变元素的display属性

absolute：绝对定位，相对于static以外的第一个父元素进行定位，如何不存在这样的包含块则相对于body进行定位。脱离文档流，并改变了display属性，元素本身生成块级框（可以设置宽高，不设置宽度时宽高由内容撑开，不继承父级宽度，可以在一行显示，换行符不解析）

fixed:固定定位，相对于浏览器窗口进行定位。脱离文档流，并改变了display属性，元素本身生成块级框。

inherit:从父元素继承 position 属性的值。IE8以及以前的版本都不支持inherit属性。

sticky:粘性定位，它结合了结合了position:relative 和 position:fixed 两种定位功能于一体的特殊定位

21、如何实现div居中，如何让float元素居中

.center {  display: -webkit-flex;  -webkit-justify-content: center;  -webkit-align-items: center;  }

.center {position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); }

//浮动元素居中
//子元素在父元素里面垂直居中
//父元素设置
｛display:table-cell;vertical-align:middle; ｝
//浮动元素既垂直又水平居中的方法
    {display:table-cell;vertical-align:middle;margin:0 auto;}

DIV居中的几种方法

22、如何区分html和html5

1. 拖拽释放(Drag and drop) API2. 语义化更好的内容标签（header,nav,footer,aside,article,section）3. 音频、视频API(audio,video)4. 画布(Canvas) API5. 地理(Geolocation) API6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；7. sessionStorage 的数据在浏览器关闭后自动删除8. 表单控件，calendar、date、time、email、url、search9. 新的技术webworker, websocket, Geolocation支持HTML5新标签：

23、CSS选择器有哪些？它们的优先级顺序怎么样？CSS3增加了哪些伪类选择器？

ID选择符 #box
类选择符 .box
标签 div
伪类和伪元素 link、visited、active、hover

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

CSS选择器优先级总结

24、对json的理解

JSON，是一种轻量级数据交换格式，是一种传递对象的语法，JSON能够做到字符串到对象之间的转换

JSON.stringify()方法用于将一个值转为字符串。该字符串应该符合JSON格式，并且可以被JSON.parse()方法还原　

　　默认情况下，JSON.stringify()输出的JSON字符串不包括任何空格字符或缩进

25、get和post的区别

get和post是HTTP与服务器交互的方式，get用于获取数据，post用于提交数据

GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

GET后退按钮/刷新无害，POST数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
GET能被缓存，POST不能缓存 。
GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中。
GET对数据长度有限制，当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST无限制。
与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。

GET和POST还有一个重大区别，简单的说：

GET产生一个TCP数据包；POST产生两个TCP数据包。

长的说：

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

GET和POST两种基本请求方法的区别、get和post区别？

26、link与@import的区别

1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

就结论而言，强烈建议使用link标签，慎用@import方式。

参考：link和@import的区别

27、如何实现移动端字体大小屏幕自适应，百分比方法的缺点，rem的作用

（1）用媒体查询+rem

@media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {//针对iPhone 4, 5c,5s, 所有iPhone6的放大模式，个别iPhone6的标准模式
html{font-size:10px;}
}
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) {//针对大多数iPhone6的标准模式
html{font-size:12px;}
}@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) {//针对所有iPhone6+的放大模式
html{font-size:16px;}}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) {//针对所有iPhone6+的标准模式,414px写为412px是由于三星Nexus 6为412px，可一并处理
html{<font-size:20px;}
}

（2）js+rem

按照设计稿的宽去设置一个合适的rem ,配合js查询屏幕大小来改变html的font-size，从而达到适配各种屏幕的效果

(function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;<br>window.innerWidth>max ?  window.innerWidth : max;if (!clientWidth) return;docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
//这个方法就是在监听屏幕的宽度，然后根据不同的屏幕做出反应
//orientationchange :检测屏幕发生反转时，就是是横屏还是竖屏时
//clientWidth :就是设备的宽度
//docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; 核心就是这句设置根元素的字体大小是clientWidth/320*20
//document.documentElement.clientWidth 屏幕宽度

（3）CSS3的计算calc和vw单位

calc()的运算规则

使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

.elm {/*Firefox*/-moz-calc(expression);/*chrome safari*/-webkit-calc(expression);/*Standard */calc();}

VW：相对于视口的宽度。视口被均分为100单位的vw，也就是说在375宽度的屏幕中，1vw等于3.75px，320的屏幕中，1vw等于3.2px。这样的话对于不同尺寸的屏幕有了一个统一的单位来进行衡量，这时我们再结合rem，即对HTML设置字体大小font-size：calc(100vw/18.75)——这是以iPhone6的尺寸为设计图时做的计算，此时在iPhone6尺寸的页面中1rem为20px；

28、如何封装ajax？参数是什么对象？

export const BASEURL = '/api/'export function ajax(options){    let config = {url:options.url,method:options.method || 'get',params:options.params || {},data:options.data || {},headers:options.headers || {}}axios.interceptors.response.use((response) => {     //响应拦截器if (response.data.errorCode === '401') {router.push('/login')message({message:'会话失效，请重新登陆',type:'error'})return response} else {return response}}, (error) => {return Promise.reject(error)})return axios(config).catch((e) => {if(!e.response){router.push('/login')message({message:'会话失效，请重新登陆',type:'error'})}else{if(e.response.status === 504){message({message:"网关超时",type:'error'})}else{message({message:e.response.data.msg,type:'error'})}}})
}