一、vw 布局

vw 是什么？

vw 和 vh 是新增加的单位，是将视口的宽度分为100份，1份宽叫做 1vw；高分为100份，每份高叫做 1vh。

vw 有什么用？

  • 让一个盒子充满屏幕

例如做一个遮罩层：
HTML:

  1. <div class="mask">
  2.     <div class="box"></div>
  3. </div>

CSS:

.mask {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
.mask .box {
    width: 600px;
    height: 400px;
    background: #00b38a;
}
  • rem 响应式布局

过往我们使用 js 动态计算 html 的 fontSize，有了 vw 可以使用 vw 来计算；
例如设计稿宽 750px，相当于页面在 750px 的设备上，此时 html 的 font-size 是 100px；使用 vw 表示：

html {
  font-size: 13.333vw;
}

写上以上代码后，就不需要再用 js 设置 html 的 font-size；

二、补充数组方法

let ary = [1, 2, 5, 6, 10];
  • 数组.filter(function (item, index) {return 条件})过滤，把满足条件，即回调函数 return true 的项拿出来组成一个新数组；原数组不变；
let r1 = ary.filter((item, index) => item >= 6);
  • 数组.every(function (item, index) {return 条件}):用来验证数组的每一项是否满足某个条件（条件就是回调函数返回值），如果每一个都满足条件就会返回true，否则返回false；
let result = ary.every(function (item, index) {
    return item > 3;
});
console.log(result);
  • 数组.some(function (item, index) {return 条件})：验证数组中是否有一些向满足条件，满足就会返回 true，否则 false；
let r2 = ary.some(function (item, index) {
    return item > 3
});
console.log(r2);
  • 数组.find(function (item, index) {return 条件})：查找数组中满足条件的第一项，找到第一个就返回，如果有多个都满足条件也只是获取第一个；如果没找到返回 undefined【注意找到返回数组项，不是新数组】
let r3 = ary.find(function (item, index) {
    return item > 30;
});
console.log(r3);