Skip to content
前端小尚 edited this page Mar 2, 2015 · 2 revisions

通过媒体查询根据分辨率设置html的字号,这样的话可以使已rem为单位的手机网站自适应起来。

$viewsize()

//编译后:
@media only screen and (max-width: 300px) {
  html {
    font-size: 8.33333px
  }

  .viewport {
    max-width: 300px
  }
}
@media only screen and (max-width: 310px) and (min-width: 300px) {
  html {
    font-size: 8.33333px
  }

  .viewport {
    max-width: 310px
  }
}
@media only screen and (max-width: 320px) and (min-width: 310px) {
  html {
    font-size: 8.61111px
  }

  .viewport {
    max-width: 320px
  }
}
@media only screen and (max-width: 350px) and (min-width: 320px) {
  html {
    font-size: 8.88889px
  }

  .viewport {
    max-width: 350px
  }
}
@media only screen and (max-width: 360px) and (min-width: 350px) {
  html {
    font-size: 9.72222px
  }

  .viewport {
    max-width: 360px
  }
}
……
Clone this wiki locally