关于微信小程序的尺寸关系

时间:2017-01-23 15:11:52   收藏:0   阅读:5403

在微信小程序开发中,大家尽量使用rpx为单位,

px实际上就是系统级的rem(把页面按比例分割750份,1rpx=window.innerWidth/750),或者scale伸缩布局的width=750。也就是说,微信小程序的rpx布局帮大家把rem布局的js设置根元素字体尺寸这步省了,用rpx就减少了媒体查询的那些步骤

通过rpx,大家只需要根据750的设计稿写代码即可,不必担心它在各个平台的适配情况,

rem的优势:rem是淘宝移动web端就是采用此方案,其中r可以理解成root,不同的页面设置不同页面的根元素的font-size的值,就可以达到响应式布局

技术分享

或者是媒体查询设置根元素的尺寸

@media screen and (min-width: 320px) {
    html {
        font-size: 100px;
    }
}
 
@media screen and (min-width: 360px) {
    html {
        font-size: 112.5px;
    }
}

flex布局:flex布局就是流式布局,即宽度永远铺满页面宽度,但高度和其他单位仍然用px

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!