react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
116 lines (100 loc) • 2.18 kB
text/less
: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*/
// }
//}