1、 px em rem
px => 相对与屏幕像素,像素越多那么就会约清晰, 如果屏幕从小屏幕到大屏幕 同样的像素,那么大屏幕不一定清晰 对不同屏幕大小 适配的话不一定能够准确的展示,不能解决不同设备上不同分辨率的适配 所以出现了em
em => 根据父级元素设置的px值来,在此基础之上。如果最近的父级上没有设置font-size的字号 ,会一级一级的朝上去找有font-size的值,一直到html的根节点上设置:font-size
<html lang="en" style="font-size: 12px">
缺点:em会有就近原则,如果在最近的父级上设置了font-size,那么就会改变这个父级下的像素,而不会根据html那个节点上的值为依据。因此出现了rem
rem => 解决了em的缺陷,这个就是在根节点上设置值,不会受到父级的设置的值影响。 可以用第三方插件,更加完善的修缮rem
<html lang="en" style="font-size: 12px">
根据375px的设计稿
375 / 37.5 = 10px 1.6rem
441 / 37.5 = 11.76px 1.6rem
font-size: 62.5% 不准确,因为是依据浏览器的16px,但是不是每个浏览器的默认大小都是16px;
面试题:['1', '2', '3'].map(parseInt)
解析第一步 拆分:
var newArr = arr.map(test)
console.log(newArr)
function test (value, index, array){
return value;
}
解析第二步 parseInt:转整型
function parseInt(string){ return string -> 转成int }
但是回传3个值进来,但是parseInt只接收2个值
parseInt('1', 2) => 首先'1'会转整数, => 当成2进制数字 => 转换 => 10进制
['1', '2', '3'].map(function parseInt(value, index) {
// '1' 0 1的0进制 所以0或者不写 那么就当十进制 那么十进制转十进制 那么就是不转
// '2' 1 2的1进制 没有1进制 那么就是NaN
// '3' 2 3是没有2进制的 所以NaN
//
index是有范围的可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。
如果省略该参数或其值为 0,则数字将以 10 为基础来解析。
如果它以 “0x” 或 “0X” 开头,将以 16 为基数。
如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN。
})
parseInt("10"); //返回 10
parseInt("19",10); //返回 19 (9 + 1x10)
parseInt("11",2); //返回 3 (1 + 1x2)
parseInt("17",8); //返回 15 (7 + 1x8)
parseInt("1f",16); //返回 31 (f=15 + 1x16)
parseInt("010"); //未定:返回 10 或 8
this指向
注意点: 1 如果在函数原型上定义一个方法,但是这个函数并没有实例化,那么直接调用这个函数原型上的方法的时候,这个方法中的this不是指向函数,方法直接调用而是指向window
定时器中的this,指向的是window
数组去重的各种方法
方法1 for循环
function uniqueArr(array){
var _arr = [],
// 做一个是否重复的判断
isRepeat;
for(let i = 0; i< array.length;i++){
isRepeat = false;
for (let j=0; j<_arr.length;j++){
// 如果循环_arr中有array中的数
if(_arr[j] === array[i]){
// 那么就设置为true
isRepeat=true
// 然后跳出这个循环
break;
}
}
// 只有这个判断为false的时候,才会把只push到_arr中
if(!isRepeat){
_arr.push(array[i])
}
}
return _arr
}
uniqueArr([1,2,4,5,5,5,5,5,6,66,7,8,9])