移动端响应式开发rem字体与页面百分比设置

@media screen and (min-width:240px){body{font-size:10px}}
@media screen and (min-width:320px){body{font-size:12px}}
@media screen and (min-width:360px){body{font-size:12px}}
@media screen and (min-width:375px){body{font-size:12px}}
@media screen and (min-width:384px){body{font-size:14px}}
@media screen and (min-width:400px){body{font-size:14px}}
@media screen and (min-width:414px){body{font-size:14px}}
@media screen and (min-width:424px){body{font-size:14px}}
@media screen and (min-width:480px){body{font-size:15.36px}}
@media screen and (min-width:540px){body{font-size:17.28px}}
@media screen and (min-width:720px){body{font-size:23.04px}}
@media screen and (min-width:750px){body{font-size:24px}}
html, body {
    width:100%;
    height:100%;
    color:#646464;
    font-family: "微软雅黑";
    text-decoration: none;
}
body {max-width:768px;margin:0 auto;}
*{
    margin:0;
    padding:0;
}
img {
    border:0;font-size:0;width:100%;
}
ul{
    list-style-type:none;
}
a {
    color:#646464;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color:rgba(255,0,0,0);
}
.grid-5,.grid-10,.grid-15,.grid-20,.grid-25,.grid-30,.grid-35,.grid-40,.grid-45,.grid-50,.grid-55,.grid-60,.grid-65,.grid-70,.grid-75,.grid-80,.grid-85,.grid-90,.grid-95,.grid-100{
    display:block;border: 0;text-align:center;float: left;min-height: 1px;box-sizing: border-box;vertical-align: middle;-webkit-tap-highlight-color:rgba(255,0,0,0);
}
.grid-5{width:5%;}
.grid-10{width:10%;}
.grid-15{width:15%;}
.grid-20{width:20%;}
.grid-25{width:25%;}
.grid-30{width:30%;}
.grid-35{width:35%;}
.grid-40{width:40%;}
.grid-45{width:45%;}
.grid-50{width:50%;}
.grid-55{width:55%;}
.grid-60{width:60%;}
.grid-65{width:65%;}
.grid-70{width:70%;}
.grid-75{width:75%;}
.grid-80{width:80%;}
.grid-85{width:85%;}
.grid-90{width:90%;}
.grid-95{width:95%;}
.grid-100{width:100%;}