/*
  - use @media :root em and rem to fit screen
  - use php / js calculate for different size
  - 
*/
@media only screen and (max-width: 300px) {
  :root{
    font-size: 0.7em;
  }
}
@media screen and (min-width: 300px) and (max-width:600px) {
  :root{
    font-size: 1.4em;
  }
}
@media screen and (min-width: 600px) and (max-width:900px) {
  :root{
    font-size: 2em;
  }
}
@media screen and (min-width: 900px) and (max-width:1200px)  {
  :root{
    font-size: 2.5em;
  }
}
@media screen and (min-width: 1200) and (max-width:1500px)  {
  :root{
    font-size: 3em;
  }
}
@media screen and (min-width: 1500) and (max-width:1800px)  {
  :root{
    font-size: 3.5em;
  }
}

h1,h2,h3,h4,h5,h6{
  color:grey;
}

*{
  font:yahei;
}

div.box{
  display:flex;
  display: -webkit-flex;
  height:100%;
  flex-direction:column;
}
div.roll{  flex: 1; 
  width: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height: auto;
}
html,body{
  height:100%;
}
footer.footer{
  width: 100%;height: 2rem;
}
button.button_footer {
 background: #3094D0;
 border: 1px solid transparent;
 border-radius: 3px;
 color: white;
 font-size:0.8rem;
 height: 1.5rem;
 width: 20.9%;
 }