前端自適應技巧

1、設置div的高與寬相同

.class-name{
    background:pink;
    display:inline-block;
    width:60%;
    padding-bottom: 30%;//div寬度的一半
}

2、absolute絕對定位下div水平居中

.class-name{
    position: absolute;
    width:100px;
    left:50%;
    margin-left:50px;//div寬度的一半
}

3、float浮動樣式文字換行或溢出等

.class-name{
    float:left;
    width:50%;
    //div縮小或文字過多時，不換行，溢出文字隱藏
    overflow: hidden;
    white-space: nowrap;
    //文字過多時 用...代替
    text-overflow: ellipsis; 
    //加上這個代表文字溢出時，隱藏左邊
    direction: rtl;
}

先記錄一下 後續更新