第一次面试所遇到的问题

前两天去面试了，整个面试过程还算顺利，但其中不乏有几个对我而言比较薄弱的点，今天来说一下这几个点

css3的媒体查询

首先是媒体查询问题，HR问我对css3的了解，我说了几个balabala，然后她说我没说到重点：媒体查询。由于我使用媒体查询次数太少，故而只是有点印象的说了@media关键字，另外由于我的项目使用了rem自适应布局，我的做法是用js来获取屏幕宽度设置html的font-size 属性，但是这么做需要操作DOM元素，所以基于优化方面HR给我的意见是用媒体查询来做。

何为媒体查询

媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。

这里就针对我项目中设置html的font-size属性来使用媒体查询整改结果应为

@media (max-width: 320px) {
	 	html {
	 		font-size: 320/20px;
	 	}
}
@media (max-width: 480px) {
	 	html {
	 		font-size: 480/20px;
	 	}
}
@media (max-width: 720px) {
	 	html {
	 		font-size: 720/20px;
	 	}
}
........

后面还有其他设备尺寸我就不添加了，这里因为后面的会覆盖掉前面的样式所以不需要使用min-width 就可以。并且由于我最初在做的时候默认将设计稿分为20份，故而这里均为/20。但是个人认为这么做似乎太过冗余，稍微查找了一些似乎@media 没有类似scss的混合函数那种东西，只能一条一条写，也可能是我了解不够多，若有人知道还望指出。
另外这里附上我原本的做法

    <script>
        document.querySelector('html').style.fontSize = window.screen.width / 20 + 'px'
        window.onresize = function () {
            document.querySelector('html').style.fontSize = window.screen.width / 20 + 'px'
        }
    </script>

比较简单的用js来写的方法，获取当前屏幕宽度，给html设置对应的font-size属性，每当屏幕尺寸发生变化时重新改变font-size属性，简洁度来说比上面的方便得多，但是由于优化方面的原因，还是看情况使用吧。

vue的周期函数

HR问了我vue的生命周期问题，虽然勉强答了一些上来，不过还是不够完善，这里重新复习一下。

beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用,简单来说这个阶段什么东西都没有，不管是DOM元素还是自定义的变量函数。

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。这是我们用的非常频繁的一个生命周期函数，也是你最早可以调用各种变量函数的生命周期。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。此时页面上的DOM元素尚未被加载完成。

mounted

el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。同时这也是你最早可以操作DOM元素的生命周期。

至于updated 和 destroyed 由于用的频率太低暂且不谈，若以后有需要会再回过头来看看。

主要就是以上两个问题了，另外跨域问题也建议大家多留意。

若有问题烦请指出谢谢。

第一次面试所遇问题