样式相关
去除移动端 input 阴影
移动端开发的时候，在 iphone 下的 input，上边框有一块阴影，导致与设计稿不统一
outline: none;
-webkit-appearance: none; /*去除系统默认的样式*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 点击高亮的颜色*/
超出显示省略号-单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
超出显示省略号 - 多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /*行数*/
overflow: hidden;
1px 边框
/*上边框*/
.border-bottom-line:after {
bottom: 0;
top: auto;
}
/*下边框*/
.border-top-line:before {
top: 0;
bottom: auto;
}
.border-top-line:before,
.border-bottom-line:after {
left: 0;
right: auto;
content: '';
position: absolute;
height: 1px;
width: 100%;
background-color: #eaeaea;
display: block;
z-index: 15;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
文字垂直居中
.xxx {
display: flex;
align-items: center;
justify-content: center;
line-height: normal;
}
禁用微信 webview 调整字体大小
在微信上可以调整字体，有时候会导致我们整体的布局错乱。所以这里禁用掉微信的字体调整
body {
-webkit-text-size-adjust: 100% !important; //禁止微信端字体缩放
}
WARNING
这块代码仅对 IOS 生效，android 上网络上有说用WeixinJSBridge，但是我没试。android 端就不处理了
android 端价格符号 ¥ 少一横问题
在某些 android 机上，会出现 ¥ 少一横的情况 。 这个是因为用了全角的符号。 复制 ¥ 替换你代码中的符号，既可以解决问题
箭头
.xxx {
content: '';
width: 0;
height: 0;
border-left: 0.14rem solid transparent;
border-right: 0.14rem solid transparent;
border-top: 0.14rem solid #f75539;
}