react-app-shell/activity/src/views/layout/layout.less

react打包脚本和example, 这里的版本请忽略

:global {
    // 兼容 iPhone XSM 和 XR
    @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
        #layout {
            padding-bottom: 134px;
        }

        #footer {
            padding-bottom: 34px;
        }
    }

    // 兼容 iPhone X 和 XS
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
        #layout {
            padding-bottom: 134px;
        }

        #footer {
            padding-bottom: 34px;
        }
    }
}

.noLayout {
    width: 750px;
    margin: 0 auto;
    box-shadow: 0px 1px 1px #c8c8c8; /*no*/

    a {
        cursor: pointer;
    }
}

.layout {
    width: 750px;
    margin: 0 auto;
    padding-bottom: 100px;
    background-color: #F5F5F5;
    box-shadow: 0px 1px 1px #c8c8c8; /*no*/

    a {
        cursor: pointer;
    }
}

.footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 750px;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
    text-align: center;
    color: #999999;
    background-color: #FFFFFF;
    box-shadow: 0 1px 0px 0px #c8c8c8 inset; /*no*/

    & > div {
        float: left;
        padding: 11px 0;

        img {
            width: 49px;
            height: 49px;
            margin-bottom: 5px;
        }
    }

    .purchase {
        width: 306px;
    }

    .subscribe {
        width: 33%;
    }

    .userCenter {
        width: 306px;
    }

    .activeTab {
        color: #424242;
    }
}

//@media screen and (-webkit-min-device-pixel-ratio: 2) {
//    .noLayout {
//        box-shadow: 0px 0.5px 1px #c8c8c8; /*no*/
//    }
//
//    .layout {
//        box-shadow: 0px 0.5px 1px #c8c8c8; /*no*/
//    }
//
//    .footer {
//        box-shadow: 0 0.5px 0px 0px #c8c8c8 inset; /*no*/
//    }
//}
//
//@media screen and (-webkit-min-device-pixel-ratio: 3) {
//    .noLayout {
//        box-shadow: 0px 0.333333px 1px #c8c8c8; /*no*/
//    }
//
//    .layout {
//        box-shadow: 0px 0.333333px 1px #c8c8c8; /*no*/
//    }
//
//    .footer {
//        box-shadow: 0 0.333333px 0px 0px #c8c8c8 inset; /*no*/
//    }
//}