在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 移動端1px問題的sass代碼

移動端1px問題的sass代碼

首先說一下，我對1px邊框的理解，出現(xiàn)這個問題的原因是某些高清屏，一個css像素對應(yīng)多個物理像素，導(dǎo)致設(shè)置邊框為1px的時候，看起來會比較粗。例如兩個尺寸一樣大的屏幕，高清屏比普通屏幕1px看起來粗，但是實際尺寸一樣

不知道上面的理解是否正確

不知道解決1px邊框問題 可以使用scale的方法，不知道有沒有即插即用的sass函數(shù)，請貼出代碼（其他方法也可）

回答
編輯回答
離人歸

以1px下邊框為例
定義一個border-bottom-1px的mixin，設(shè)置一個顏色參數(shù) @color。

@mixin border-bottom-1px($color){
    position: relative;
    &:after{
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px solid $color;
        content: ' ';
    }
}

對border-bottom-1px進行縮放

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
    .border-bottom-1px{
         &::after{
             -webkit-transform: scaleY(0.7);
             transform: scaleY(0.7);
         }
    }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
    .border-bottom-1px{
         &::after{
             -webkit-transform: scaleY(0.5);
             transform: scaleY(0.5);
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    .border-bottom-1px{
         &::after{
             -webkit-transform: scaleY(0.3);
             transform: scaleY(0.3);
        }
    }
}

如何使用？
html如下：

<div class="border-bottom-1px-test">這個元素有一個1px的下邊框</div>

css如下：

.border-bottom-1px-test{
    @include border-1px(rgba(7, 17, 27, 0.1));
}

寫css的時候記得先引入border-bottom-1px這個mixin哦。

2018年9月23日 07:14
編輯回答
硬扛

沒用過sass，我也基本沒做過移動端。但關(guān)于1px的問題應(yīng)該可以參考這個文章

《使用border-image實現(xiàn)類似iOS7的1px底邊》https://github.com/maxzhang/m...

其它的：https://github.com/RubyLouvre...

2017年12月30日 23:39