-
Notifications
You must be signed in to change notification settings - Fork 4
adaptive
前端小尚 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
}
}
……