記錄一些開發小技巧~
1、 字體大小小於12px
- chrome核瀏覽器不支持中文字體小於12px，但ui圖很多時候會有小於12px的設計需求。
- 解決方法：
使用css的 transform: scale(); 特性來縮小內容。
例如設置字體大小10px：
font-size: 12px;
transform: scale(10/12);
需要注意這個方式雖然縮小了字體，但該文字元素所佔據的原寬高大小並不會跟着縮小，所以很多時候還需要考慮文字位置和間距的問題。
一般文字位置需要結合 transform-origin 屬性來設置。
例如設置文字水平居左、垂直居中：
transform-origin: left center;
間距問題自己湊一湊調整一下就差不多了，個人覺得沒必要精確計算，必要時再結合position定位屬性控制。
2、子元素佔據剩餘高度
- 需求：父盒子不定寬高，第一個子盒子也不定寬高，要求第二個子盒子佔據剩餘高度。
- 解決方法：
使用flex佈局。
.parent {
height: 100% 或 數值;
display: flex;
flex-direction: column;
}
.secondChild {
flex: 1;
}
3、圖片設置高度等於寬度
- 在圖片容器大小不確定的情況下，想設置圖片的寬度自適應，高度等於寬度，也就是正方形顯示。
- 解決方法：
利用padding-top的特性結合定位實現，
padding-top值爲百分比時該值默認按寬度計算，用padding-bottom也行。
.imgWrap {
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
4、font-weight 字體粗細
- 很多時候ui設計圖都是給各個端統一用的，ui設計師們喜歡使用蘋果字體來設計，經常會有font-weight: 500 這種，可能你印象中好像h5只支持400和700兩個數值，500不起作用。
- 其實，font-weight值500支不支持和系統以及瀏覽器都沒有關係，而是取決於字體支不支持，像windows平臺下常見的宋體、微軟雅黑以及安卓的默認字體一般都不支持500的值，而ios裏的默認字體是支持的，所以我們還原設計稿時最好把設計稿裏設計的font-family和font-weight代碼都寫上，支持最好，不支持拉倒，不需要做特殊處理，畢竟字體文件都是幾十兆起步，強行放項目裏也不可取。
5、盒子水平垂直居中
- 父盒子和子盒子都不定寬高，如何使子盒子水平垂直居中？這是個老生常談的問題了，也是面試官喜歡問的問題，在此吐槽一下有些面試官只追求數量不追求質量的方式，真是，知道的方法再多有多少意義，難道開發中輪流着用嗎？
- 在此就不列舉哪些五花八門的方法了，只推薦兩種適用性廣的方法，一般夠用了。
// 方法一：利用flex佈局
.parent {
display: flex;
justify-content: center;
align-items: center;
}
// 方法二：利用定位及位移
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
- 以上兩種方法都有一些不適用的場景，根據需要選擇即可。
flex方法的侷限性在於對父盒子裏所有的子元素都會生效，如果子元素不止一個，那就都一起居中了；
定位方法的侷限性在於如果子元素需要做一些transform屬性的動畫效果就不行了，因爲transform: translate會一起做動畫，那就很奇怪了。