CSS 寶典

input點擊時候，有個灰塊

outline:medium;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only;

 

橫向滾動。

.container {
    overflow-x: scroll;
    overflow-y:hidden;
    white-space:nowrap;
    padding: 15px 0px 20px;
    .item {
        display: inline-block;
        width: 33%;
        img {
            width: 70%;
        }
    }
}

 

 寬度計算。android4.3不兼容。android4.4部分兼容

width: calc(~'100% - 54px');

CSS單行省略號：

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

CSS多行省略號：(padding過大，會無效果)

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

 CSS垂直劇中  flex

.y-item-img-bg {
    position: absolute;
    right: 6%;
    top: 10px;
    width: 30%;
    height: 80px;
    display: flex;
    display: -webkit-flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    img {
        max-width: 100%;
        max-height: 100%;
    }
}

 CSS正方形（頭圖） padding-bottom: 100% 。（height:100%。 會致使圖片更改圖片比例，若圖片不是正方形，圖片會被壓縮。）

.img-bg{
    position: relative;
    height: 0;
    margin: 0;
    overflow: hidden;
    padding-bottom: 100%;
    .item-img {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 100%;
    }
}

 

1像素line。  transform 是關鍵。

:global .line {
      width: 100%;
      height: 1px;
      background-color: #EBEBEB;
      -webkit-transform: scale(1, 0.5);
      transform: scale(1, 0.5);
    }

 

input placeholder 設置

        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
            color: #cccccc; 
        } 
        input:-moz-placeholder, textarea:-moz-placeholder { 
            color: #cccccc; 
        } 
        input::-moz-placeholder, textarea::-moz-placeholder { 
            color: #cccccc; 
        } 
        input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
            color: #cccccc; 
        }

屏幕寬度

document.documentElement.clientWidth