移动端的rem布局

@charset "utf-8";
/*reset*/
body,button,input,select,textarea{font:100%/1 "Helvetica Neue",Helvetica,STHeiTi,"Microsoft YaHei";}
body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,article,aside,footer,header,hgroup,nav,section,menu{margin:0; padding:0;-webkit-text-size-adjust:100%;}
table{border-collapse:collapse;border-spacing:0;}
em,i{font-style:normal;}
li{list-style:none;}
img{border:0;}
input,img{vertical-align:middle;}
article,aside,footer,header,hgroup,nav,section,menu{display:block;}
a{text-decoration:none;}
.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
html,body{height:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;color: #666666;background-color:#F7F7F7 !important;font-size: 10px;}
a,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0);outline:none; -webkit-font-smoothing:antialiased}

@media only screen and (min-width:320px ) {
html,body{font-size: 100px}
}

@media only screen and (min-width:375px ) {
html,body{font-size: 117.1875px}
}

@media only screen and (min-width:414px ) {
html,body{font-size: 129.375px}
}

@media only screen and (min-width:640px ) {
html,body{font-size: 200px}
}
/* ipad横屏 */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){
html,body{font-size: 300px ;}
}

/* ipad竖屏 */
@media (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
html,body{font-size: 240px;}
}