饿了么笔记

// base.scss
@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
    .borderTop-1px,.borderLeft-1px{
        -webkit-transform : scaleY(0.7);
        transform:scaleY(0.7);
    }
}
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .borderTop-1px,.borderLeft-1px,{
        -webkit-transform : scaleY(0.5);
        transform:scaleY(0.5);
    }
}
// common.scss
@mixin bg-image($url) {
    background-image: url($url + "@2x.png");
    @media (-webkit-min-device-pixel-ratio:3),(min-device-pixe-ratio:3) {
        background-image:url($url + '@3x.png');
    };
}
@mixin borderTop-1px($color) {
    position: relative;
    &:after{
        display:block;
        position: absolute;
        left:0;
        bottom:0;
        width:100%;
        border-top:1px solid $color;
        content:'';
    }
}
@mixin borderLeft-1px($color) {
    position: relative;
    &:after{
        display:block;
        position: absolute;
        left:0;
        bottom:0;
        width:100%;
        border-left:1px solid $color;
        content:'';
    }
}
-----------------------------------------
@import 'common';
.borderTop-1px{
    width:200px;
    @include borderTop-1px(red);
}
div{
    @include bg-image($url)
}
========================================

console.log(window.devicePixelRatio);

========================================
// stick footer布局
<div class='detail'>
    <div class="detail-wrapper clearfix">
        <div class="datail-main"></div>
    </div>
    <div class="detail-close">
        <i class="icon-close">X</i>
    </div>
</div>
<style>
    .clearfix{
        display: inline-block;
        &:after{
            display:block;
            content: ".";
            height:0;
            clear:both;
            visibility: hidden;
        }
    }
    .detail{
        position:fixed;
        z-index:100;
        top:0;
        left:0;
        width:100%;
        height:100%;
        overflow:auto;
        background:rgba(7,17,27,0.8);
        .detail-wrapper{
            min-height:100%;
            .detail-main{
                padding-bottom:64px;
            }
        }
        .detail-close{
            display: block;
            position:relative;
            width:32px;
            height:32px;
            margin:-64px auto 0 auto;
            clear:both;
            font-size:32px;
        }
    }
</style>