移动端样式问题汇总-青梅煮码

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

div {

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

}

2,输入去掉边框,单击阴影,下划线

输入{

边界:0;

大纲:无;

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

-webkit-appearance:无;

}

3,css画箭头

.arrow-right {

宽度:12px;

高度:12px;

边框底部:1px实心#999;

右边框:1px实线#999;

变换:rotate(-45deg);

}

4,超过1行/ 2行显示省略号

.line-1 {

宽度:100px;

空白:nowrap;

溢出:隐藏;

文字溢出:省略号;

}

.line-2 {

宽度:100px;

溢出:隐藏;

文字溢出:省略号;

显示:-webkit-box;

-webkit-line-clamp:2; //控制多行的行数

-webkit-box-orient:垂直;

}

5,水平/垂直居中定位

//绝对定位未知高度,距顶部,左边50%,然后转换:translate(-50%,-50%),不支持IE9以下

。中央{

位置:绝对;

最高:50%;

左:50%;

转换:translate(-50%,-50%);

}

//绝对定位已知高度

。中央 {

保证金:自动;

位置:绝对;

最高:0;

底部:0

左:0;

正确:0;

}

//绝对定位已知高度

。中央 {

位置:绝对;

最高:50%;

左:50%;

边距:-50px 0 0 -50px; //假设宽高都为100px

}

//弹性布局

。中央{

显示:flex;

align-items:center;

证明内容:中心;

}

6,iPhone X页面适应

具体参考https://www.cnblogs.com/lolDragon/p/7795174.html

<meta name =“ viewport” content =“ width = device-width,初始比例= 1.0,最小比例= 1.0,最大比例= 1.0,用户可缩放比例=否,viewport-fit = cover”>

身体{

padding-top:constant(安全区域插入顶部);

padding-bottom:constant(safe-area-inset-bottom);

padding-left:constant(安全区域插入左);

padding-right:constant(安全区域插入权);

}

7,占位符样式设置

::-webkit-input-placeholder {} / *使用webkit内核的浏览器* /

:-moz-placeholder {} / * Firefox版本4-18 * /

::-moz-placeholder {} / * Firefox版本19+ * /

:-ms-input-placeholder {} / * IE浏览器* /

//冒号前写input或textarea等元素

// IE9和Opera12以下版本的CSS选择器均不支持占位文本

8,去掉图片底部至少边距

img {

边界:0;

垂直对齐:底部;

}

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

按钮{

-webkit-tap-highlight-color:透明;

}