前端自适应技巧

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;
}

先记录一下 后续更新