css 页面特殊显示效果

1.移动端最小设置字体为12px，如果想要更小字体效果：

-webkit-transform:scale(0.9);

2.文字超过两行时，末尾显示点点的效果：

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;

3.文字不换行，长度超过60px时显示点点的效果：

width: 60px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;

4背景图片的兼容性写法：

background: url("../img/header_bg.png") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 55px;

5.线性渐变条的兼容性写法：

background: -moz-linear-gradient(bottom, #F66E22, #FFD260);
background: -webkit-linear-gradient(bottom, #F66E22, #FFD260);
background: -o-linear-gradient(bottom, #F66E22, #FFD260);

6.多使用flex布局（一般处理上下左右居中）

display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
当然还有其他一些常见的，比如：
flex: 1;(自适应长度)
-webkit-flex: 1;
flex-direction: culumn;（对齐方式）
-webkit-flex-direction: column;
flex-wrap: wrap;(启用换行，默认不换行)
-webkit-flex-wrap:wrap;

不再赘述，详细请参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

7.div模拟输入框 设置placeholder  高度自适应

  首先contenteditable="true"

div{
width: 100%;
min-height: 20px;
/*设置最小高度*/
max-height: 300px;
/*设置最大高度超过300px时出现滚动条*/
margin-left: auto;
margin-right: auto;
outline: 0;
color:#000;
font-size: 14px;
line-height: 24px;
word-wrap: break-word;
word-break:break-all;
overflow-x: hidden;
overflow-y: auto;
}
div:empty::before {
color:#666;
content:attr(placeholder);

}

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有