美文网首页
微信小程序设计稿的尺寸

微信小程序设计稿的尺寸

作者: 剑圣_盖小聂 | 来源:发表于2021-07-01 14:49 被阅读0次

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就交给小程序自己换算。

转换规律:
设计稿是375px:1rpx=0.5px;
设计稿是750px: 1rpx=1px;

相关文章

  • 微信小程序设计稿的尺寸

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。 规定屏幕宽为750rpx。如在 iP...

  • 微信设计稿尺寸

    APP设计稿尺寸规范 国外手机屏幕介绍 微信浏览器 - 可视区域适口大小 Chrome浏览器 Emulation模...

  • 微信小程序canvas尺寸设置

    微信小程序尺寸设置可使用rpx来标记尺寸,类同rem可在微信小程序中自适应兼容换算不同的机型尺寸。但在小程序can...

  • 1、小程序自定义组件

    小程序尺寸单位与设计原则小程序设计稿依据:以iphone6为基准宽度为750个物理像素,对应逻辑分辨率为375pt...

  • 关于写作

    前不久看到微信的程序设计员的一个小故事,大致是关于微信的一些程序设计方面的,记者问微信的程序设计员说,“近年来“那...

  • 微信小程序尺寸单位rpx以及样式相关介绍

    微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750...

  • rpx

    rpx:微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。也就是说,无论是在iPho...

  • 小程序中的rpx

    rpx:微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。也就是说,无论是在iPho...

  • iOS 微信分享UI

    微信小程序设计指南[https://developers.weixin.qq.com/miniprogram/de...

  • 设计指南二 视觉规范

    引用 官方文档 一、概要 本文主要为微信小程序设计指南文章中,视觉规范部分的笔记 微信小程序 设计指南一 二、字体...

网友评论

      本文标题:微信小程序设计稿的尺寸

      本文链接:https://www.haomeiwen.com/subject/yqbjultx.html