微信小程序> 微信小程序适配方案-微信小程序建设方案-小程序建设方案

微信小程序适配方案-微信小程序建设方案-小程序建设方案

浏览量:1880 时间: 来源:qq_35321405
一.概述

1.习惯了写pc端项目,会经常考虑到适配的问题,写响应式布局。拿到微信小程序的设计图时候,有点懵,不知道px和rpx是如何规则转换的,写的很慢,感觉没有找到法门,不顺手。又仔细阅读了文档规则,大彻大悟,很简单。

二.名词

2.物理分辨率=设备像素=物理像素

3.逻辑分辨率=逻辑像素=css像素=独立像素,肉眼感知尺寸

4.设备像素比=物理分辨率/逻辑分辨率

5.iPhone6为例:逻辑像素:375,物理像素:750,设备像素比:2

三.小程序适配方案

6.小程序的适配原理,提出了一种新单位rpx,为ui和开发们省去了很大的功夫。rpx(responsivepixel):可以根据屏幕宽度进行自适应。

7.规定屏幕宽为750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx=375px=750物理像素,1rpx=0.5px=1物理像素。

8.一般情况设计稿是按照iphone6尺寸设计的,设计稿上尺寸大小可以直接等于rpx设计稿:(175.3px,91.8px),小程序:(175.3rpx,91.8rpx)。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎