设计微信小程序是按照什么尺寸做？

如题所述

第1个回答 2020-05-11

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在
iPhone6
上，屏幕宽度为375px，共有750个物理像素，则750rpx
=
375px
=
750物理像素，1rpx
=
0.5px
=
1物理像素。
设备
rpx换算px
(屏幕宽度/750)
px换算rpx
(750/屏幕宽度)
iPhone5
1rpx
=
0.42px
1px
=
2.34rpx
iPhone6
1rpx
=
0.5px
1px
=
2rpx
iPhone6s
1rpx
=
0.552px
1px
=
1.81rpx
微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem:
规定屏幕宽度为20rem；1rem
=
(750/20)rpx
注：开发微信小程序时设计师可以用
iPhone6
作为视觉稿的标准。
建议：设计稿使用设备宽度750px比较容易计算750px的话1rpx=1px，这样的话，设计图上量出来的尺寸是多少px就是多少rpx，至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算本回答被提问者采纳

相似回答

微信小程序ui设计尺寸规范答：小程序开发尺寸是rpx（responsive pixel），可以实现一稿适配所有屏幕尺寸，小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。这里了解就行，设计稿尺寸375px或750px都没问题。

小程序商城运营推广所需的设计和详情页是尺寸是多少?答：专题页头图（即首页焦点图/轮播图）：尺寸视行业特性而定，如百货类、生鲜类690*230，如服装类530*650。其他小程序推广页分别为：弹窗图530*650，浮窗海报750*259，会场转发图500*400 如服装类，我们会在架构表备注的要求商品详情页：750或800的宽度皆可，适应手机阅读，高度则根据商品本身实际情况...

小程序详情页尺寸大小多少答：小程序详情页尺寸是750*1600*1400 你在设计稿件中可以把图片做成750px宽，而高度，我建议你做成1600，然后掐头去尾留1400高度作为画布的高度。并且要求考虑到屏幕变长变短后UI是否可以适应。(这个和设计自适应网页一致)为什么要这样做？不同手机高度是不相同的。当然宽度也不相同，但是小程序给了你一种...

rpx是微信小程序WXSS的尺寸单位答：为了适应广大的前端开发者，微信小程序的 WXSS 具有 CSS 大部分特性。同时为了更适合开发小程序，微信开发者对 CSS 进行了扩充以及修改。与 CSS 相比WXSS扩展的特性有：其中，rpx就是尺寸单位。建议：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。注意：在较小的屏幕上不可避免...

如何做微信小程序答：机型选择：小程序以IPhone6的屏幕尺寸为设计标准，让UI小姐姐按照IPhone6屏幕尺寸来切图。预览界面：写好视图布局后点击编译，视图界面刷新显示远程调试：手机端和PC端开发工具联调（非常实用）上传代码：上传到腾讯服务器，提交审核必经步骤。可以填写版本号和备注信息。5-1：代码体积，微信限制 2M 以内。5...

H5设计稿切图按照什么尺寸,微信公众号版本的答：你好手机像素尺寸，现在市场上大部分是：720*1280px，当然，还有680*1008；苹果的不知道。五六尺寸是：360*640 建议以：720*1280px为准来设计手机版面，ps:避免做到手机上以后图片失真。希望能帮到你

微信小程序设计指南微信小程序ui设计规范汇总答：开发者可根据自身功能设计需要在页面内添加自有导航。并保持不同页面间导航一致。但是受限于手机屏幕尺寸的限制,小程序页面的导航应尽量简单,若仅为一般线性浏览的页面建议仅使用微信导航栏即可。开发者可选择小程序页面添加标签分页(Tab)导航。标签分页栏可固定在页面顶部或者底部,便于用户在不同的分页间做切换。标签...

怎么设计全屏的微信小程序?答：首先，打开微信小程序，点击右上角的最大化按钮，将窗口扩大到整个屏幕。如果微信小程序窗口没有最大化按钮，可以通过双击窗口标题栏来实现全屏显示。另外，也可以使用键盘快捷键来实现全屏显示。在Windows操作系统中，可以按下F11键来切换全屏显示和窗口显示。微信小程序全屏显示后，可以更好地展示小程序的...

哈尔滨微信如何做设计微信设计风格答：如何设计微信小程序微信小程序设计指南摘要基于微信小程序的轻快特性,我们起草了小程序界面设计的指南和建议。设计指南建立在充分尊重用户知情权和操作权的基础上。旨在微信生态内建立友好、高效、一致的用户体验,同时最大程度地适应和支持不同需求,实现用户和小程序服务商的共赢。友好的礼貌在微信上使用小程序服务时...

大家正在搜

微信小程序设计稿尺寸怎么设计微信小程序微信小程序图标尺寸微信小程序用的图片尺寸微信小程序商城图片尺寸如何设计微信小程序微信小程序图片尺寸多大合适微信测距小程序叫什么微信小程序软件设计