uni-app css尺寸单位rpx介绍

这篇具有很好参考价值的文章主要介绍了uni-app css尺寸单位rpx介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一,前言

1.在使用uni-app开发小程序时支持的尺寸单位如下

(1)基础单位:pxrpx
(2)h5单位:remvmvh

2.rpx是微信小程序提出的一种响应式px

二,rpx介绍

1.现实情况下,ui设计师只提供一个分辨率的图,严格按设计图标注的 px 做开发,在不同宽度的手机上界面很容易变形,而且主要是宽度变形。高度一般因为有滚动条,不容易出问题。由此,引发了较强的动态宽度单位需求,从而有了rpx单位

2.rpx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应,750 宽的屏幕为基准,750rpx 恰好为屏幕宽度,换句话说,在rpx世界中,屏幕的宽度就是750rpx

三,转化关系

1.为了还原ui设计稿,我们就得知道ui设计稿的px 到底等于多少 rpx,计算公式为:750 * 元素在设计稿中的宽度 / 设计稿基准宽度

  • 例如若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 Auni-app
    里面的宽度应该设为:750 * 100 / 640,结果为:117rpx

  • 若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 Buni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400rpx

2.为了方便开发,HBuilderX 提供了自动换算的工具,只需填入1rpx=比例值(px) 即可,公式为 设计稿基准宽度/750
uni-app css尺寸单位rpx介绍

四,注意事项

1.早期uni-app提供了upx,目前已改成rpx

2.为了方便开发,设计师可以用 iPhone6 作为视觉稿的标准,或者设计宽度为750px文章来源地址https://www.toymoban.com/news/detail-460860.html

到了这里,关于uni-app css尺寸单位rpx介绍的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Uni-App开发框架介绍

    Uni-App是一家公司(DCloud)产品,公司承诺将一直开源且免费。 公司旗下有4个产品: HBuilder X:开发工具 uni-app:跨平台统一框架 uniCloud:云服务提供商 uniMPsdk:Mobile端sdk,用于接入uni-app开发的模块 主要盈利方式是uni-ad(广告业务)和unicloud(云服务商) 一次编写,多端运行 小程

    2024年02月12日
    浏览(52)
  • 小程序02/小程序 响应式单位rpx 、image组件概念说明 和 mode属性介绍

    rpx: 规定不管屏幕为多少px , 100%的屏幕宽度就是750rpx 100% 屏幕的宽度 = 750rpx rpx是微信小程序独有的,解决屏幕自适应的尺寸单位 可以根据屏幕宽度进行自适应,不论大小屏幕,规定屏幕宽为750rpx 通过 rpx 设置元素和字体的大小,小程序在不同尺寸的屏幕下,可以实现自动适配

    2024年02月11日
    浏览(41)
  • 2. uni-app的一些介绍

    就目前的前端生态而言,跨端开发基本算是每一个前端开发者必备的技能点之一了,而在Vue这个技术栈里uni-app在跨端是独一档的,不信的话可以翻翻Boss之类的招聘网站.... 阅读时间: 约5~10分钟; 本文重点: 通过本文你可以知道uniapp是什么; 技术栈、入门难度等等; 我们该

    2024年04月24日
    浏览(47)
  • 使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv-ui开发脚手架

    项目代码以上传至码云,项目地址:https://gitee.com/breezefaith/uniapp-vue3-ts-scaffold 近日心血来潮想做一个开源项目,目标是做一款可以适配多端、功能完备的模板工程,包含后台管理系统和前台系统,开发者基于此项目进行裁剪和扩展来完成自己的功能开发。但前台系统花样繁多

    2024年01月20日
    浏览(60)
  • uni-app--》常用组件的相关介绍

    🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生 🛵个人主页:亦世凡华、 🛺系列专栏:uni-app 🚲座右铭:人生亦可燃烧,亦可腐败,我愿燃烧,耗尽所有光芒。 👀引言         ⚓经过web前端的学习,相信大家对于前端开发有了一定深入的

    2023年04月17日
    浏览(37)
  • Webpack 插件实现 CSS 样式尺寸单位转换

    以下是编写的一个 Webpack 插件,用于将样式文件中以 rpx 为单位的值转换为以 px 为单位的值(换算比率为 1px=2rpx): 上面的代码创建了一个名为 CssSzieConvertPlugin 的插件类。该插件通过注册到 Webpack 的 emit 钩子上来处理样式文件。 在钩子回调函数中,首先遍历所有的 chunk 和文

    2024年02月08日
    浏览(29)
  • 小程序-uni-app:将页面(html+css)生成图片/海报/名片,进行下载 保存到手机

    一、需要描述 本文实现,uniapp微信小程序,把页面内容保存为图片,并且下载到手机上。 说实话网上找了很多资料,但是效果不理想,直到看了一个开源项目,我知道可以实现了。 本文以开源项目uniapp-wxml-to-canvas 为蓝本 记录集成的步骤,以供参考。 详细内容可以下载并启

    2024年02月07日
    浏览(53)
  • uni-app 项目支持 vue 3.0 介绍及升级指南

    HBuilderX 3.3.0+  更新uni-app编译器,支持基于 Vite 编译到小程序平台。 至此, uni-app 在 App/H5/小程序 全平台支持 Vue 3.0 开发,且全平台支持 Vite 编译器,下载 HBuilderX 3.3.0+ 体验。 Tips: H5/PC Web 平台:hello-uniapp H5 端已迁移 vue3,点击体验 除支持  vue3  语法特性外, uni-app  特有

    2024年02月10日
    浏览(52)
  • 1个月uni-app微信小程序开发上线实战专栏介绍

    《uni-app开发微信小程序1个月上线实战》,目标带领1000位同学成功开发上线一个自己的个人小程序! 作者介绍 :国服第二切图仔——资深前端开发工程师,具有六年以上的前端开发经验,曾在多家知名企业任职,CSDN、阿里云、华为云等平台优质创作者,擅长前端性能优化,

    2023年04月16日
    浏览(54)
  • 小程序-uni-app:hbuildx uni-app 安装 uni-icons 及使用

    一、官方文档找到uni-icons uni-app官网 二、下载插件 三、点击“打开HBuildX” 四、选择要安装的项目 五、勾选要安装的插件 六、安装后,项目插件目录 根目录uni_modules目录下增加uni-icons、uni-scss 七、引入组件,使用组件 八、经过测试,成功。 参考链接 http://lihuaxi.xjx100.cn/new

    2024年02月12日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包