前端开发中UI问题处理
A: 尽量减少fixed的用法和vh和vw的css计算，在魅族手机上不支持vh和vw 的计算，fixed的css在部分安卓手机上有不兼容的问题，可以使用 transform: translateZ(0)来避免会抖动的问题；
B: 一像素的边框问题，尽量是哟vant组件中自带的边框，可以解决安卓手机上一像素分布补均匀的情况，注：input的边框要使用div嵌套
C： 所有的页面都要统一设置字体的基础字体和基础family,
D: input字体偏下的问题可以加上line-height:normal 解决；
E: 底部占位的不能用空的div，要给列表的容器加一个padding-bottom;
F: 要精确使用ui给的图，注意fixed的层级问题
G: 商品图片用背景图展示，长方形的图显示中间部分
@include wh(180px, 180px);
background-size: cover !important;
background-position: center center !important;
H: 需要在本页面修改其他组件的样式，可以使用>>>或者/deep/来进行定义，避免污染其他组件
I: 需要分页加载的页面要对城防列表的容器进行高度的动态定位，除一下css之外，要用js单独计算高度
height: auto;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
J: 针对iphoneX的适配，底部和顶部都要加高度；
@supports (bottom: constant(safe-area-inset-bottom)) or
(bottom: env(safe-area-inset-bottom)) {
.goods-footers {
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
height: calc(98px + env(safe-area-inset-bottom));
height: calc(98px + constant(safe-area-inset-bottom));
}
}
K：有小图标和字同时存在的时候可以选择放图片替换字，避免安卓手机上字体偏上的问题
L：字体加粗用 font-weight: 500;或者Medium字体