关于微信小程序非750设计稿的px和rpx的转换

最新推荐文章于 2024-06-12 10:11:16 发布
置顶 最新推荐文章于 2024-06-12 10:11:16 发布
阅读量2.5k 收藏 3
点赞数 2
分类专栏： wx小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27808079/article/details/108143365
版权

一般情况下我们的设计稿是375或者750
但是我们如果遇到411的设计稿时，我们怎么就需要如下来转换了，我们结合css的calc来计算
假设我们的设计稿是411的，div盒子的width是100px，那就需要如下的计算：
width: calc(750rpx * 100 / 411); 效果如下
在这里插入图片描述

前端渣渣灰
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uni-app 对照设计稿还原不同屏幕像素适配（iPhone X）
专注基础架构领域
06-25 3841
​ 最近项目中需要高频度使用单位像素换算，以适配不同屏幕大小的需求，这里我以蓝湖为例，下面我给出换算步骤： 1、把蓝湖设计稿选到 ios 端，这时候页面单位变成了pt，因为我们iPhone X的屏幕和这个设计稿的宽度一样是375px（我们这里对照的真机也是iPhone X），所以这里我们可以看做 1pt = 1px = 2rpx，图示如下： 2、如果是需要随着屏幕宽度不同而随之改变的，我们使用rpx进行css样式计算，遵循 1pt = 2rpx 的计算公式，这里我们需要加上安全区域（不同手机的安全区
微信小程序设计文档
Kaqiulee的博客
10-19 3139
小程序方案设计 我设计的小程序名字叫“运动之参天大树”，大体上是想设计一个通过运动来种树的小程序。用户注册之后，可以在喜欢的地方种树，然后连通微信步数来换取浇水的水滴，对树进行浇水，树得到水滴之后会变大，到了一定的大小可以选择收获，即砍树放入收藏夹里，之后可以在收藏夹里查询到。收藏夹位于个人中心，个人中心还可以修改自己的资料。 项目的流程图如下： 整个项目的功能任务点有：注册、登录、种树、浇水、砍树、收藏夹展示、个人中心及资料、天气查询。 Controller接口有HelloCon.
小白学习微信小程序的页面布局和屏幕适配
最新发布
qq_67153941的博客
06-12 323
三、总结 本文详细介绍了微信小程序页面布局和屏幕适配的内容，通过WXML、WXSS和JS三个文件可以实现页面的结构、样式和逻辑。上述代码中，通过Page函数创建了一个页面对象，通过data属性可以定义页面中的数据，通过onLoad和onTap等方法可以定义页面的生命周期和交互操作。二、屏幕适配 在微信小程序中，为了适应不同尺寸的屏幕，可以使用rpx单位进行布局和样式设置。可以根据实际需求来添加和调整页面结构。上述代码中，通过设置元素的宽度和高度为rpx单位，实现了元素在不同尺寸的屏幕上的自适应。
【来一杯word】微信小程序项目需求分析及设计初稿
weixin_48310754的博客
05-06 2697
【来一杯word】微信小程序从0到上线 第一章 【来一杯word】微信小程序项目需求分析及设计初稿 文章目录【来一杯word】微信小程序从0到上线前言一、需求分析、功能实现二、使用步骤1.引入库2.读入数据总结 前言 最近正在学习微信小程序项目的开发，准备自己开发一款查询单词的微信小程序，以达到巩固知识，练手的目的，无论最后是否可以成功，希望在过程中可以学到知识！ 一、需求分析、功能实现 项目名称:【来一杯word】 功能实现： 首页:实现在输入框输入单词，点击搜索，可以得到单词的详细信息； 单词详情
微信小程序设计稿的px与rpx的转换
小柒的博客
03-15 4258
1.获取设计稿的宽 2.设计稿宽除以iphone6屏宽算出设计稿和Iphone6的比值 3.设计稿测量出的元素像素乘以比值=设计稿测出的元素px所要转换的rpx 注 rpx不是一个新单位，类似css3的rem，是一微信编译器进行响应式转换像素的标识符 ...
微信小程序开发 px转换rpx
qwerewf的博客
09-11 1936
前言：最近在编写一个uniapp开源项目时，由于没有UI设计稿就使用浏览器提供的手机调试工具，把项目切换到iphone6作为UI设计稿。 大家都知道UI设计师一般都是以750宽度作为视觉稿的标准。接下来先让我们了解一些概念然后再来了解rpx转换px的换算。 像素：像素是图像的基本采样单位，它不是一个确定的物理量，因为像素点的物理大小是不确定的。 分辨率:分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点。如描述iphone6的分辨率是750*1334。 分辨率又分为【物理分辨率】和【逻辑分辨
什么是rpx尺寸单位？
小鱼儿~同学
02-11 2万+
rpx （ responsive pixel）响应单位 rpx是微信小程序独有的、解决屏幕自适应的尺寸单位 可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配 rpx 和 px之间的换算 在普通网页开发中，最常用的像素单位是px 在小程序开发中，推荐使用rpx这种响应式的像素单位进行开发 以...
微信小程序——动画操作时rpx 和 px 的转换计算
03-29
var px = rpx / 750 * systemInfo.windowWidth; ------------------- ------------------- 详解版： 分割线 ------------------- ------------------- 先理解两个概念。 分辨率有两种。 【物理分辨率 rpx...
微信小程序开发-rem转换rpx小工具
03-29
然后在对数组中的元素字符串进行再次根据 “：” 进行拆分，这样就把原rem样式的数字给提取出来了，然后就根据规则转换成rpx的数值，重新组合就好了。 css格式化工具：https://tool.lu/css/   源码:   <!...
微信小程序开发--从px到rpx
03-29
本文摘要：设计师以iphone6为标准出设计稿的话，1rpx=0.5px=1物理像素。Photoshop里面量出来的尺寸为物理像素点。所以可以直接使用标注尺寸数据。 --------------------------------------看懂本文摘要的话，就不用...
微信小程序 实例汇总 完整项目源代码
11-01
1. **框架结构**：微信小程序基于一套自定义的XML-like语法，称为WXML（微信小程序标记语言）和WXSS（微信小程序样式语言），它们分别负责结构和样式。同时，JavaScript用于处理逻辑和数据绑定。 2. **页面生命周期...
微信小程序中单位rpx和rem的使用
11-29
这篇文章主要给大家讲解了rpx和rem应用于微信小程序，如果你还没有入门，建议先从下面看起  微信小程序官方文档  >web app变革之rem  >rpx单位官方文档  >rpx单位基础介绍 如果看完上面几篇文章，我们开始...
750px设计稿处理方式
weixin_45766034的博客
01-27 1906
一般设计图的宽度为750px，现在我们的目标就是将layoutviewport设置为750px； layoutviewport受到两个属性的影响，width属性我们之间设置为750，initial-scale缩放比例应该为idealviewport的宽度/750； 当我们未改变meta标签属性的时候，layoutviewport的值其实就是idealviewport的值，所以可以通过document.body.clientWidth或者window.innerWidth来获取。 (function () {
微信小程序 尺寸单位px与rpx之间的转换（入门篇）
weixin_34377919的博客
01-25 1万+
1、rpx:微信小程序中的尺寸单位rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx. 微信官方建议视觉稿以iphone6为标准。 2、个人示例测试: 假设我们需要一个宽为200px，高为200px这样的A元素模块;我们分别在iphone5和iphone6上测试px与rpx之间的转换。 iphone5： 在iphone5上1px等于...
微信小程序 px和rpx px和pt 深度解析
lee727n的博客
09-17 1万+
通过这篇博客我们深入的研究一下rxp。想要理解rpx首先看一张图，理解一下pt和px 如图所以 pt和px是有对应关系的 不同的机型 会有1倍2倍3倍的对应关系： pt 称为逻辑分辨率 和 和屏幕的尺寸有关系 屏幕大 逻辑分辨率就多 ，屏幕小 逻辑分辨率就小 px 称为物理分辨率 和屏幕没有关系 和pt有对应关系 例如iphone6 对应2倍渲染关系。375逻辑分辨率的屏幕就可以渲染出750物理分辨率 特别注意：小程序中的px指的是逻辑分辨率（pt） 例如 ihone6机型下给图片750px 实际上
微信小程序之最简单的Demo设计使用
hbblzjy的博客
11-10 5929
这个小Demo，代码量不多：导航样式、View、Text、点击、JS交互的使用，主要是理解每个后缀文件的功能，然后才能更好的使用开发.......（下面代码和源代码没差别，实在想要的请留言，谢谢。。。）首先在index.wxml中创建相关控件      点我点我        {{motto}}  然后在index.wxss中设计控件位置和属性样式，/**rpx单位是微信小程序中css的尺寸单位，
微信小程序尺寸单位rpx和样式使用详解
pcaxb的专栏
02-24 3万+
转载请注明预见才能遇见的博客：http://my.csdn.net/ 原文地址： 微信小程序尺寸单位rpx和样式使用详解 1.尺寸单位 rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px
ios多设备多分辨率适配
小号鱼头
12-01 1750
移动app开发中多种设备尺寸适配问题，过去只属于Android阵营的头疼事儿，只是很多设计师选择性地忽视android适配问题，只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6，iOS平台尺寸适配问题终于还是来了，移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。 加上Android生态中纷繁复杂的各种奇葩尺寸，现在A
微信小程序 尺寸单位rpx与px,rem相互转换
热门推荐
dzp_coder
10-14 8万+
1. rpx :微信小程序开发中新出了尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。 如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。 微信官方建议视觉稿以iPhone 6为标准. rem（root em
微信小程序中rpx+px+wv+hv
12-05
在微信小程序中，rpx是相对长度单位，可以根据屏幕宽度进行自适应缩放，而px是绝对长度单位，不会随着屏幕大小的变化而变化。wv和hv是相对于视口宽度和高度的单位，也可以根据屏幕宽度进行自适应缩放。 下面是一个使用rpx、px、wv和hv的例子： ```css /* 在wxss文件中定义样式 */ .container { width: 750rpx; /* 宽度为750rpx，相当于屏幕宽度的一半 */ height: 100px; /* 高度为100px，不会随着屏幕大小变化 */ background-image: url("https://i.loli.net/2020/05/30/RM5WChLDqZtVX9S.png"); /* 背景图片 */ } .text { font-size: 32px; /* 字体大小为32px，不会随着屏幕大小变化 */ line-height: 1.5; /* 行高为字体大小的1.5倍 */ margin-top: 20rpx; /* 上边距为20rpx，相当于屏幕宽度的1/30 */ padding: 20px 30px; /* 内边距为20px和30px */ } .image { width: 50wv; /* 宽度为屏幕宽度的1/2 */ height: 50hv; /* 高度为屏幕高度的1/2 */ margin: 20px auto; /* 上下边距为20px，左右居中 */ } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值