阿里

https://www.jianshu.com/p/f3147a804368

1. 如何解决跨域的问题

2. 常见Http请求头

协议头	说明	示例
Accept	可接受的相应内容类型	如 Accept: text/plain
Accept -Charset	设置可接受的字符编码	如 utf-8
Acept-Encoding	设置接受的编码格式	如 gzip, deflate
Accept-Detetime/Language	设置接受的时间版本和语言	-
Cache-Control	设置缓存机制	如 private
Content-length	设置请求体的长度	如 348
Content-Type	设置请求体的MIME类型	如 application/x-www-form-urlencoded / application/json; charset=utf-8
Date	时间	-
Cookie	-	-
Referer	前一个页面的地址	-
User-Agent	代理游览器	-

引用文章：https://www.cnblogs.com/widget90/p/7650890.html

3. 移动端适配1px的问题

现象：在移动端css里面写1px，实际看起来比1px粗主要问题出现在边框
原因：
在移动端开始的时候会在hearder中写

content属性值:

width: 可视区域的宽度 device-width则是设备的宽度

initial-scale 设置页面首次显示的缩放级别

maximum-scale 最大最小缩放级别

user-scalable 用户是否能去页面进行缩放

首先，我们了解devicePixelRatio这个东西

在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。然而1px在不同的移动设备上都等于这个移动设备的1px，这是因为不同的移动设备有不同的像素密度。有关这个属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素 / 独立像素 1px变粗的原因：viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性,它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3,css里写的1px长度映射到物理像素上就有2px或3px那么长
用代码演示一下这个现象，通过css的媒体查询

    @media screen and (-webkit-min-device-pixel-ratio: 1) {
    .test { 
        width: 100px;
        height: 100px;
        background: red;
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .test { 
        width: 100px;
        height: 100px;
        background: pink;
        }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .test { 
        width: 100px;
        height: 100px;
        background: yellow;
        }
}

通过chrome打开
现正常模式观察

1.png

可以看到默认pc端情况下devicePixelRatio的值为1
再通过手机调试模式打开

2.png

3.png

可以看到在小678 devicePixelRatio的值为2，而在678plus中devicePixeRatio的值为3

解决办法1: 用小数只来写px

.border{ 
    border-top: 1px solid red;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { 
        border-width: .5px;
        }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { 
        border-width: .333333px;
        }
}

测试在chrome手机模式下 devicePixelRatio为2的边框显示正常而在为3的情况下不显示
优点：简单
缺点：不兼容ios8以下设备不兼容安卓设备

解决办法2: 伪类 + transform实现

原理：把原先元素的border去掉,然后用伪元素重做border,再用transform scale缩小一班，最后让伪元素相对与原先元素做绝对定位

.border-yuan{
    margin-top: 30px;
    width: 100px;
    height: 100px;
    border-bottom: 1px solid red;
}

.border-2{
    position: relative;
    margin-top: 30px;
    width: 100px;
    height: 100px;
    border: none;
}

.border-2::after{
    position: absolute;
    content: '';
    bottom: 0;
    width: 100%;
    height: 1px;
    background: red;
    transform: scaleY(0.5);
    transform-origin: 0 0;
}

    原先的


    处理后的

4.png

可以看到处理后的明显细一些
四条边框的处理办法:

.border-2::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: 0 0;
}

采用这种方法要注意定位方向和缩小的定点
优点：

所有场景都能满足

支持圆角(伪类和本体类都需要加border-radius)

缺点：

对于已经使用伪类的元素(例如clearfix)，可能需要多层嵌套

解决办法3: viewport + rem

详细步骤 https://github.com/amfe/article/issues/17

优点：

所有场景都能满足

一套代码，可以兼容基本所有布局

缺点：

老项目修改代价过大，只适用于新项目

引用文章：https://blog.csdn.net/weixin_43675871/article/details/84023447 https://www.jianshu.com/p/7e63f5a32636

4. 介绍flex布局

其他css方式设置垂直居中
居中为什么要使用transform（为什么不使用marginLeft/Top）

[x] 使用过webpack里面哪些plugin和loader

[x] webpack里面的插件是怎么实现的

dev-server是怎么跑起来

项目优化

抽取公共文件是怎么配置的

项目中如何处理安全问题

怎么实现this对象的深拷贝

2018-阿里前端面试题

阿里