记录一些开发小技巧~
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会一起做动画，那就很奇怪了。