阿里
http://www.lxweimin.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 | 代理游覽器 | - |
3. 移動端適配1px的問題
現象：在移動端css里面寫1px，實際看起來比1px粗 主要問題出現在邊框
原因：
在移動端開始的時候會在hearder中寫
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
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;
}
}
<div class="test">
</div>
通過chrome打開
現正常模式觀察
可以看到默認pc端情況下devicePixelRatio的值為1
再通過手機調試模式打開
可以看到在小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;
}
}
<div class="border"></div>
測試在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;
}
<div class="border-yuan">
原先的
</div>
<div class="border-2">
處理后的
</div>
可以看到處理后的明顯細一些
四條邊框的處理辦法:
.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://blog.csdn.net/weixin_43675871/article/details/84023447 http://www.lxweimin.com/p/7e63f5a32636
4. 介紹flex布局
其他css方式設置垂直居中
居中為什么要使用transform（為什么不使用marginLeft/Top）
[x] 使用過webpack里面哪些plugin和loader
[x] webpack里面的插件是怎么實現的
dev-server是怎么跑起來
項目優化
抽取公共文件是怎么配置的
項目中如何處理安全問題
怎么實現this對象的深拷貝
