css 頁面特殊顯示效果，css頁面效果

css 頁面特殊顯示效果，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