首页 > hbuilderX的upx单位是什么鬼？

hbuilderX的upx单位是什么鬼？

uni-app 使用 upx 作为默认尺寸单位， upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。

开发者可以通过设计稿基准宽度计算页面元素 upx 值，设计稿 1px 与框架样式 1upx 转换公式如下：

设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx

举例说明：

若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117upx。

若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400upx。

 

1、动态绑定的 style 不支持直接使用 upx。

2、使用 uni.upx2px(Number) 转换为 px 后再赋值。

更多相关：

  • 【抬杠】在某些时候不希望用户缩小浏览器的宽度，因为咳咳~会导致你的布局混乱，那么这个代码就是帮助你如何限制浏

    方式1：简单纯粹，非Vue项目直接复制用完即走！ /*限制浏览器宽度*/ @media screen and (max-width: 1200px) {html {overflow: hidden;}html:after {content: "← 亲！请保持网页宽度>1200像素 →";position: fixed;top: 0;...

  • TextView-- 测量文字宽度

     https://my.oschina.net/lengwei/blog/637380; http://blog.csdn.net/mare_blue/article/details/51388403; http://blog.csdn.net/baidu_31093133/article/details/52413893;   --...

  • 简单小程序开发流程

    app.js App({onLaunch: function() {if (!wx.cloud) {console.error('请使用 2.2.3 或以上的基础库以使用云能力')} else {wx.cloud.init({// env 参数说明：// env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx...

  • 微信 小程序布局 水平菜单

  • MVC、MVP、MVVM

    MVC、MVP、MVVM这些模式是为了解决开发过程中的实际问题而提出来的，目前作为主流的几种架构模式而被广泛使用。 一、MVC（Model-View-Controller） MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结...

  • 宏定义的布局约束

    *自适应向布局约束的转化关闭*/ #define PREPCONSTRAINTS(VIEW) [VIEW setTranslatesAutoresizingMaskIntoConstraints:NO] #define CONSTRAIN(PARENT, VIEW, FORMAT) [PARENT addConstraints:[N...

  • sift论文_卷积神经网络设计相关论文

    最近梳理了一下卷积神经网络设计相关的论文（这个repo现在只列出了最重要的一些论文，后面会持续补充）：Neural network architecture design​github.com1. Handcrafted1.1 Efficient[1608.08021] PVANET: Deep but Lightweight Neu...

  • FastReport.net 使用 Winform WebForm打印

    delphi用的fastreport比较多 所以。net中也研究一下用法,这个打印控件还是很简单的 只要手动设计一下写少许代码就可以打印了 甚至可以写成通用代码 以后就可以不用写代码 安装demo会同时安一个设计器  打开设计器 通过设计器设计模板 新建数据源 新建数据集    查询单表全部内容，选中完成即可，现在我们要做一个带...

  • 【转】《iOS7 by Tutorials》系列：iOS7的设计精髓(上)

    简介： 本文翻译自《iOS7 by Tutorials》一书的第一章“Designing for iOS 7”，主要从程序员角度介绍了iOS7的新设计理念，堪称神作！本文翻译仅作学习交流之用，版权归原作者所有，有删减。非专业翻译人士粗糙之处在所难免，想体会原文精髓的朋友请到Raywenderlich商店支持正版。 —————— by...

  • UML：概要设计，用什么画我的类图？

    背景 做过需求之后，很少使用 UML 画概要设计，这几天尝试的用了几个工具，最总还是选择了 VisualStudio。 Edraw 详细信息很难编辑，如：签名。 Viso 添加成员太麻烦了。 VisualStudio 图形不支持着色。 备注 使用 VisualStudio 可以直接将概要设计的成果用在详细设计中。   转载于...

©2024 11GX.COM