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

Posted 2020-08-28 爱吃土豆的包子君

在微信小程序开发中，大家尽量使用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