移动端自适应(rem)--封装

原创 1028490987 随笔 响应式 295阅读 2018-01-27 11:14:31 举报

@media only screen and (max-width: 1080px),
only screen and (max-device-width: 1080px) {
html,
body {
font-size: 100px;
}
}

@media only screen and (max-width: 960px),
only screen and (max-device-width: 960px) {
html,
body {
font-size: 88.888px;
}
}

@media only screen and (max-width: 800px),
only screen and (max-device-width: 800px) {
html,
body {
font-size: 74.074px;
}
}

@media only screen and (max-width: 720px),
only screen and (max-device-width: 720px) {
html,
body {
font-size: 66.666px;
}
}

@media only screen and (max-width: 640px),
only screen and (max-device-width: 640px) {
html,
body {
font-size: 59.259px;
}
}

@media only screen and (max-width: 600px),
only screen and (max-device-width: 600px) {
html,
body {
font-size: 55.555px;
}
}

@media only screen and (max-width: 540px),
only screen and (max-device-width: 540px) {
html,
body {
font-size: 50px;
}
}

@media only screen and (max-width: 480px),
only screen and (max-device-width: 480px) {
html,
body {
font-size: 44.444px;
}
}

@media only screen and (max-width: 414px),
only screen and (max-device-width: 414px) {
html,
body {
font-size: 38.333px;
}
}

@media only screen and (max-width: 400px),
only screen and (max-device-width: 400px) {
html,
body {
font-size: 37.037px;
}
}

@media only screen and (max-width: 375px),
only screen and (max-device-width: 375px) {
html,
body {
font-size: 34.722px;
}
}

@media only screen and (max-width: 360px),
only screen and (max-device-width: 360px) {
html,
body {
font-size: 33.333px;
}
}

@media only screen and (max-width: 320px),
only screen and (max-device-width: 320px) {
html,
body {
font-size: 29.6296px;
}
}

@media only screen and (max-width: 240px),
only screen and (max-device-width: 240px) {
html,
body {
font-size: 22.222px;
}
}

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

ul {
list-style: none;
}

a {
text-decoration: none;
color: inherit;
-webkit-tap-highlight-color: transparent;
}

.clearfix:after {
display: block;
content: "";
height: 0;
clear: both;
}

img {
width: 100%;
/ 清除3px间距 /
display: block;
}

.header {
width: 100%;
height: 1.4rem;
color: #394b5b;
background-color: #fff;
position: fixed;
margin-bottom: 1.4rem;
z-index: 9;
}

.header .back {
float: left;
color: white;
font-size: .7rem;
padding: 0 .35rem;
line-height: 1.4rem;
}

.header h3 {
float: left;
display: inline-block;
width: 73%;
color: white;
font-size: .45rem;
line-height: 1.4rem;
text-align: center;
}

.header .nav {
float: right;
font-size: .5rem;
padding: 0 .35rem;
line-height: 1.4rem;
}

.header .nav_li {
width: 100%;
margin-top: 1.39rem;
background-color: rgba(0, 0, 0, 0.9);
padding: 0.3rem 0;
}

.header .nav_li a {
font-size: 0.4rem;
width: 70%;
height: 1.5rem;
line-height: 1.5rem;
border-bottom: solid 1px rgba(255, 255, 255, 0.3);
display: block;
color: #FFFFFF;
margin-left: 1.55rem;
}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复