CSS常見問題

1.適配iPhoneX全屏

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

viewport-fit,它有三個可選值：
    contain: 可視窗口徹底包含網頁內容
    cover: 網頁內容徹底覆蓋可視窗口
    auto: 同contain的做用

2.邊框設置0.5px

.box{position:relative;width:200px; height:200px;}
.box:after{
    content: '';
    position: absolute;
    left: 0;
    top:0;
    width:200%;
    height: 200%;
    border:1px solid red;
    transform: scale(0.5);
    transform-origin: left top; /* 更改元素位置 */

}

3.flex多行時，最後一行元素左對齊

在flex多行佈局中，justify-content: space-between; 這個屬性若是最後一行元素沒有填滿，會致使最後一行元素兩端對齊

解決方案：添加空的元素(缺乏幾個添加幾個)

<div class="list"> 
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item itemEmpty"></div> 
 </div>
  
 .list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
 }
.item{
    width: 30%;
    height: 50px;
    background: red;
    margin:10px;
}
.itemEmpty{
    background: transparent;
}

4.html 網頁調起QQ彈窗

<!--uin:客服qq號  -->
 <a target="_blank" href="tencent://message/?uin=20001&site=qq&menu=yes">客服</a>

5.圖片表情與文字對齊

img.emoji{
    width:pxrem(40);
    height:pxrem(40);
    vertical-align: text-bottom;
}

6.斷網圖片加載失敗

- 圖片轉化爲base64
 - 圖片合成一張雪碧圖