码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2017-01-23 15:11:52      阅读:5403      评论:0      收藏:0      [点我收藏+]

标签:不同   程序   alt   分割   screen   window   logs   通过   媒体查询   

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

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

标签:不同   程序   alt   分割   screen   window   logs   通过   媒体查询   

原文地址:http://www.cnblogs.com/lhyforfront/p/6343976.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!