css计算函数 scalc 微信小程序_面试问题总结

1、响应式布局

一、相对长度单位。 其长度单位会随着它的参考值的变化而变化。

px,像素

em,元素的字体高度

%,百分比

rem,根元素的font-size

vm,视窗宽度，1vw=视窗宽度的1%

vh,视窗高度，1vh=视窗高度的1%

二、如何实现移动端字体大小屏幕自适应，百分比方法的缺点，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{<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;
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；

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

4、浏览器的内核有哪些

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

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

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

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

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

5.session.storage,local.storage,cookie的区别

都是用来数据储存的，cookie只能储存好像4K左右的数据，可以设置数据的过期时间，并且每次发送请求的时候都会将数据提供给后台。session和local都可以储存5M的数据，session.storage主要是可以保存在浏览器中实现多个页面互相访问的数据，但是一旦浏览器关闭数据就会被销毁。local.storage可以永久的保存在浏览器上，浏览器关闭后也可以存在，只要不手动删除就会一直在。一般存储都是存用户登录时候的数据，比如头像、用户名还有token这些，用户要退出登录的话就用clear清空数据缓存就好了

6.VUE数据双向绑定原理

vue数据双向绑定原理简单来说就是数据劫持，按照我的理解就是我看着你，你变了，我也跟着变。具体实现的话是es6提供了Object.defineProperty()这个属性来实现数据劫持的，这个属性中有两个方法，一个是get一个是set，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。发布者订阅者模式大概就是一个监听器Observer是用来监听所有的属性，当数据有变动的话就通知给订阅者，然后订阅者Watcher收到通知后执行相应的函数从而更新视图，解析器Compile进行编译解析初始化视图，并绑定更新函数给订阅者

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

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

beforeCreate(创建前),created(创建后),

beforeMount(载入前),mounted(载入后),

beforeUpdate(更新前),updated(更新后),

beforeDestroy(销毁前),destroyed(销毁后)

beforecreated：el 和 data 并未初始化

created:完成了 data 数据的初始化，el没有

beforeMount：完成了 el 和 data 初始化

mounted