前端面试 -- 第四场

公司比较小，不过对技术要求还是比较严格的，还要求看案例。做的题目都是简答题

图片自适应

1. 小图片填充大盒子

//图片会被放大失真
div {
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    }
img {
    width: 100%;
    height: 100%;
}

//只允许缩小不允许放大img
img {
    max-width: 100%;
    max-height: 100%;
}

图片响应式
移动端使用尺寸较小（640*340）的图片，按等比例缩放，用img标签
屏幕尺寸大于768px时用（2000*410）的图片，可以用背景图片，用backgroundPosition：center center居中显示,可以用媒体查询设置样式

@media (min-width: 768px){
	.item{
 	/* 不能给宽度 */
 	height: 410px;
 	background-position: center center;
 	background-repeat: no-repeat;
 	/* 以背景图的较小边放大到目标大小结束 */
 	background-size: cover;
 	}
 }

响应式设计中：如果是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 < 宽度 <= 768，加载120px的图片， 宽度> 768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。

这样做的好处是对于移动设备来说，下载的图片会小一些，减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而产生一定的模糊感。

最后，假如你的img是作为background使用的就需要通过background-size: cover/contain又或者是具体的百分比去设置图片在容器中所占比例的大小。

盒子300*400 图片100*200
background-size: contain 缩小或放大最大边 图片最终大小是200*400
background-size: cover 缩小或放大最小边 图片最终大小是300*600

2. 小盒子填充大图片
   object-fit:cover;

vue的双向绑定原理

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

微信小程序 获取用户权限

授权方法有三种：

1. wx.getSetting
   获取用户的当前设置，返回值中只会出现小程序已经向用户请求过的权限
2. wx.openSetting
   调起权限设置选择界面，设置界面只会出现小程序已经向用户请求过的权限
3. wx.authorize
   提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。，类似下面的样子

wx.getUserInfo() 获取用户信息

vue2.0中关于active-class

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；

说几个git常用命令

忘光了。。。。
https://www.liaoxuefeng.com/wiki/896043488029600
git init 创建版本库
git add 把文件添加到仓库
git commit -m xxxxxx（提交说明） 把文件提交到仓库
git status 查看仓库状态
git diff 查看修改内容
HEAD指向的版本就是当前版本，因此，Git允许我们在版本的历史之间穿梭，使用命令git reset --hard commit_id。
穿梭前，用git log可以查看提交历史，以便确定要回退到哪个版本。
要重返未来，用git reflog查看命令历史，以便确定要回到未来的哪个版本

cookie的默认失效时间

cookies生存期限就到你关闭浏览器为止
session默认是20分钟