移动端H5响应式rem配置

/*  京东 m.jd.com */

@media only screen and (min-width: 320PX) and (max-width:360PX) {
    html {
        font-size:13.65px
    }
}

@media only screen and (min-width: 360PX) and (max-width:375PX) {
    html {
        font-size:15.36px
    }
}

@media only screen and (min-width: 375PX) and (max-width:390PX) {
    html {
        font-size:16px
    }
}

@media only screen and (min-width: 390PX) and (max-width:414PX) {
    html {
        font-size:16.64px
    }
}

@media only screen and (min-width: 414PX) and (max-width:640PX) {
    html {
        font-size:17.664px
    }
}

@media screen and (min-width: 640PX) {
    html {
        font-size:27.31px
    }
}

/*
我们来看看怎么计算的

设计图中 尺寸40px盒子,我们可以看到在媒体查询中,iPhone6 的布局视口是375,即html的font-size为16px,
则计算为rem: 40/16 = 2.5 rem

*/
上一篇:感恩节节日营销H5怎么制作?


下一篇:python是如何操作HDF5文件的,看完这篇文章你就全懂了