首頁 > css样式 > css 手机版本h5上面调整字体大小导致页面出现错乱解决方法

css 手机版本h5上面调整字体大小导致页面出现错乱解决方法

css 样式:
.build-home_detail {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    margin-top:.3125rem
}
.build-home_detail .item {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1;
    -webkit-box-align:baseline;
    -ms-flex-align:baseline;
    align-items:baseline;
    margin-top:.625rem;
    line-height:1.25rem
}
.build-home_detail .item .title {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-negative:0;
    flex-shrink:0;
    font-size:.875rem;
    color:#888
}
.build-home_detail .item .content {
    display:block;
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1;
    font-size:.875rem;
    color:#101010;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    margin:0 .375rem
}
.build-home_detail .item .area {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1;
    margin-left:.375rem;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis
}
.build-home_detail .item .area .plate {
    font-size:.875rem;
    color:#101010;
    -ms-flex-negative:0;
    flex-shrink:0
}
.build-home_detail .item .area .position {
    display:block;
    font-size:.875rem;
    color:#101010;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    margin-right:.375rem
}
.build-home_detail .item .btn-detail {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-negative:0;
    flex-shrink:0;
    font-size:.75rem;
    color:#0A6;
    background:#fff
}

html代码
<div class="build-home_detail">
<div class="item">
                <span class="title">位置</span>
                <div class="area">
                        <a href="#" title="北京丰台新房" class="plate">丰台</a>-
                        <a href="#" title="北京宋家庄新房" class="plate">宋家庄</a>-
                    <span class="position">北京丰台方庄东铁匠营街道</span>
                </div>
                <span class="btn-detail">发地址到手机</span>
            </div>
</div>


相关资讯
最新资讯
IT兄弟 IT兄弟-是一家分享开发中常遇到的技术问题解决方案,也是站长们记录技术分享文章的平台。 琼ICP备2022012332号