移動(dòng)端邊框線的1px

/*邊框線1px在移動(dòng)端適配*/
.fline{
    position: relative;
    padding: .21333333rem 0 .13333333rem;
    vertical-align: middle;
}
.fline::after{
    content: " ";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background-color: #e5e5e5;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

在手機(jī)移動(dòng)端設(shè)置邊框線1px是會(huì)根據(jù)設(shè)備物理像素來(lái)適配,實(shí)際效果很差(手機(jī)端看略粗)。
這個(gè)方法是參照滴滴做的,效果還可以

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在移動(dòng)互聯(lián)網(wǎng)快速發(fā)展的今天,手機(jī)的種類和尺寸越來(lái)越多,作為前端的小伙伴們可能會(huì)越來(lái)越頭疼,但又不得不去適配一款又一...
    keenjaan閱讀 27,220評(píng)論 9 86
  • 一、meta標(biāo)簽的效果 移動(dòng)端頁(yè)面一般會(huì)在head頭部添加如下meta標(biāo)簽。 該meta標(biāo)簽是否添加對(duì)頁(yè)面渲染的影...
    nimw閱讀 3,791評(píng)論 0 5
  • 原文鏈接:移動(dòng)端1px細(xì)線解決方案總結(jié)現(xiàn)在的PM和UI總以看app的眼光看html5, html頁(yè)面要做的專業(yè)美觀...
    疾風(fēng)勁草ccy閱讀 14,331評(píng)論 4 18
  • 在之前的項(xiàng)目中,UI告訴我說(shuō)我們移動(dòng)項(xiàng)目中的邊框全部都變粗了。原諒我的近視眼,為什么我看不出什么差距了,結(jié)果UI把...
    hlemon閱讀 50,309評(píng)論 13 91
  • 年華悄逝過(guò), 鬢角染白愁。 不了明朝事, 凄涼澆滿頭。
    海王星1984閱讀 332評(píng)論 0 0

友情鏈接更多精彩內(nèi)容