移动端样式问题汇总

1、去掉移动端苹果手机点击时阴影

div {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

2、input去掉边框、点击阴影、下划线

input {
 border: 0;
 outline: none;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-appearance: none;
}

3、css画箭头

.arrow-right {
   width: 12px;
   height: 12px;
   border-bottom: 1px solid #999;
   border-right: 1px solid #999;
   transform: rotate(-45deg);
}

4、超出1行/2行显示省略号/换行

.line-1 {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-2 {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;  // 控制多行的行数
  -webkit-box-orient: vertical;
}
.wrap{
  width: 180rpx;
  text-align: justify; // center居中对齐
  text-justify: newspaper;
  word-break: break-all;
}

5、水平/垂直居中定位

// 绝对定位未知高度,距顶部、左边50%,然后transform:translate(-50%,-50%),不支持IE9以下
.center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

// 绝对定位已知高度
.center {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

// 绝对定位已知高度
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;  // 假设宽高都为100px
}

// 弹性布局
.center{
    display:flex;
    align-items:center;
    justify-content:center;
}

6、iPhone X页面适配
具体参考 https://www.cnblogs.com/lolDragon/p/7795174.html

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

body{
    padding-top:constant(safe-area-inset-top);
    padding-bottom:constant(safe-area-inset-bottom);
    padding-left:constant(safe-area-inset-left);
    padding-right:constant(safe-area-inset-right);
}

7、placeholder样式设置

::-webkit-input-placeholder{}    /* 使用webkit内核的浏览器 */
:-moz-placeholder{}                  /* Firefox版本4-18 */
::-moz-placeholder{}                  /* Firefox版本19+ */
:-ms-input-placeholder{}           /* IE浏览器 */
// 冒号前写input或textarea等元素
// IE9和Opera12以下版本的CSS选择器均不支持占位文本

8、去掉图片底部默认边距

img {
    border: 0;
    vertical-align: bottom;
  }

9、去掉按钮点击高亮样式

button{
    -webkit-tap-highlight-color: transparent;
}