uniapp如何渲染html模板,uni-app 页面样式

2023-10-27

页面样式与布局

尺寸单位

uni-app 支持的通用 css 单位包括 px、rpxpx 即屏幕像素

rpx 即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏幕变宽,rpx 实际显示效果会等比放大。

vue页面支持普通H5单位,但在nvue里不支持:rem 默认根字体大小为 屏幕宽度/20(微信小程序、字节跳动小程序、App、H5)

vh viewpoint height,视窗高度,1vh等于视窗高度的1%

vw viewpoint width,视窗宽度,1vw等于视窗宽度的1%

nvue还不支持百分比单位。

App端,在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位,只支持 px。注意此时不支持 rpx

nvue中,uni-app 模式(nvue 不同编译模式介绍)可以使用 px 、rpx,表现与 vue 中一致。weex 模式目前遵循weex的单位,它的单位比较特殊:px:,以750宽的屏幕为基准动态计算的长度单位,与 vue 页面中的 rpx 理念相同。(一定要注意 weex 模式的 px,和 vue 里的 px 逻辑不一样。)

wx:与设备屏幕宽度无关的长度单位,与 vue 页面中的 px 理念相同

下面对 rpx 详细说明:

设计师在提供设计图时,一般只提供一个分辨率的图。

严格按设计图标注的 px 做开发,在不同宽度的手机上界面很容易变形。

而且主要是宽度变形。高度一般因为有滚动条,不容易出问题。由此,引发了较强的动态宽度单位需求。

微信小程序设计了 rpx 解决这个问题,uni-app 在 App 端、H5 端都支持了 rpx。

rpx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。

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

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

换言之,页面元素宽度在 uni-app 中的宽度计算公式:

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明:若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 750,结果为:100rpx。

若设计稿宽度为 640px,元素 A

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uniapp如何渲染html模板,uni-app 页面样式 的相关文章

  • #35. 二叉树遍历(flist)(4月3日)

    include
  • Java基础篇:如何使用 break 退出循环

    在 Java 中 break 语句有 3 种作用 第一 你已经看到 在 switch 语句中 它被用来终止 一个语句序列 第二 它能被用来退出一个循环 第三 它能作为一种 先进 的goto 语句来使用 下面对最后 2 种用法进行解释 使用
  • 【Java】利用 PDF 多页模板生成 PDF 并导出

    一 所需要的依赖
  • 数据中心托管有什么好处?

    1 内置可扩展性 除了能够节省建设一个新的数据中心的资金 当涉及到可扩展的计算资源时 得益于数据中心托管服务的固有灵活性 还可以让用户节省更多的成本费用 托管服务提供商能够根据用户需求扩展或减少他们所需要的容量 这样 既有效利用了资源 还能
  • 使用eclipse创建一个图书管理系统(2)---------逻辑的实现

    就像使用C语言写代码一样 比如要用 C语言写一个小游戏的代码 我们的逻辑实现是在哪里实现的啊 是不是在一个test c源文件里面啊 没错 就是的 在之前的文章里 我说过我定义的Main函数就像C语言里的test c文件一样 所以 为了不打自
  • web安全之文件上传漏洞攻击与防范方法

    一 文件上传漏洞与WebShell的关系 文件上传漏洞是指网络攻击者上传了一个可执行的文件到服务器并执行 这里上传的文件可以是木马 病毒 恶意脚本或者WebShell等 这种攻击方式是最为直接和有效的 部分文件上传漏洞的利用技术门槛非常的低
  • HTTP 协议

    1 HTTP 介绍 2 HTTP 请求 和 响应 3 HTTP 请求方法 4 HTTP 状态码 5 HTTP 头信息 6 URL 和 URI 7 静态资源 和 动态资源 1 HTTP 介绍 HTTP协议 是 超文本传输协议 的缩写 是用于从
  • “该应用程序的数字签名无法验证......”

    该应用程序的数字签名无法验证 是否运行该应用程序 登录服务器后运行某模块时 总出现这个提示 且对话框点不动 解决 开始 控制面板 双击JAVA 打开JAVA面板 高级 安全 混合代码 沙箱代码与可信代码 安全验证 禁用验证 不推荐 图片见附
  • 【k8s故障处理篇】解决k8s集群中kubectl命令补全问题

    k8s故障处理篇 解决k8s集群中kubectl命令补全问题 一 查看k8s的版本 二 安装相关软件包 三 配置相关环境变量 四 测试tab键补齐命令 一 查看k8s的版本 查看当前k8s版本 当前环境的k8s版本为v1 16 2 本方法也
  • 解决网页不能粘贴的问题

    最近要完成老师布置的英语作业 在网站上写作文并提交 但是老师设置了 不能复制粘贴 本来在word文档里写完打好草稿了 现在却只能重新打一遍 于是我尝试解决这个问题 看看能不能粘贴上去 通过查阅资料 了解了网页的基本知识 于是探索出了如下步骤
  • 在React项目中实现调用摄像头拍照的功能

    文章目录 前言 一 如何调用摄像头 二 操作步骤 1 准备dom元素 2 添加打开和关闭摄像头的事件 3 获取图片 base64格式 三 demo 总结 前言 在日常开发中可能会遇到需要调用摄像头拍照的功能 下面为大家讲解一下在react项
  • Qt如何设置界面透明

    1 设置主窗体透明 但是窗体上的控件不透明 setAttribute Qt WA TranslucentBackground true void paintEvent QPaintEvent event QPainter painter t
  • Go入门:切片 slice,引用类型

    Go 语言中 slice表示一个拥有相同类型元素的可变长度序列 slice通常被写为 T 其中元素的类型都是T 它看上去就像没有长度的数组类型 数组和slice其实是紧密关联的 var fslice int 和声明array一样 只是少了长
  • mac版Idea快捷键

    option command L 格式化 option command M 提取方法 option command T 代码块加try catch fn shift f6 修改变量 方法名 shift command 折叠代码 shift
  • 从Java到Go:使用Go语言和Gin Web框架构建博客系统

    目录 1 Go语言基本介绍 2 从Java到Go 语法和特性对比 2 1 变量和类型 2 2 控制结构
  • js什么是事件冒泡并阻止事件冒泡

    事件冒泡 当事件发生后 这个事件就要开始传播 从里到外或者从外向里 为什么要传播呢 因为事件源本身 可能 并没有处理事件的能力 即处理事件的函数 方法 并未绑定在该事件源上 例如我们点击一个按钮时 就会产生一个click事件 但这个按钮本身
  • 【满分】【华为OD机试真题2023 JS】预定酒店

    华为OD机试真题 2023年度机试题库全覆盖 刷题指南点这里 预定酒店 知识点排序 时间限制 1s 空间限制 256MB 限定语言 不限 题目描述 放暑假了 小明决定到某旅游景点游玩 他在网上搜索到了各种价位的酒店 长度为n的数组A 他的心
  • 区块链的证明机制(Proof Of Work POW)学习心得(参考luotuo视频学习)

    在区块链学习中 参考luotuo的哔哩哔哩视频 区块链增加模块时是要经过计算的 只有计算到 开头n位为0 符合这个链条的规则时 才会将这个新的区块加入到区块链当中 这个计算hash的方法应该被加以判断 也就是增加一个方法来计算符合区块链难度
  • CSDN博客如何设置的更美观和贴好看的代码

    之前学习写博客时想要写出整洁的博文 贴好看的代码 所以百度了好多位小可爱的方法 奈何我太笨可能对我帮助不是很大 依然是一头雾水 我是想要找到那种黑色背景代码高亮的方式 后来自己慢慢琢磨出来了 所以把我的方法分享一下 1 在博客设置首页有博客

随机推荐

  • hive on spark 3.1.2集成spark3.0.0

    需要修改spark env sh 加上 export SPARK DIST CLASSPATH hadoop classpath 否则报错 2 14 51 56 117 INFO yarn ApplicationMaster Final a
  • 盘点2022年有影响力的五种顶级NFT头像

    盘点2022年15 个顶级NFT头像 NFT头像在去年风靡一时 作为一种简单的即插即用方法 任何人都可以将特征 身体 头部 背景等 加载到应用程序中以快速混合搭配 NFT 创建 因此它已成为制作头像比以往任何时候都容易 考虑到今年 NFT热
  • 美团外卖与饿了么竞品分析

    截至2020年3月 我国网上外卖用户规模达3 98亿 占网民整体的44 手机网上外卖用户规模达3 97亿 占手机网民整体的44 2 图片来源 前瞻网 2017 2019年 我国互联网餐饮外卖交易规模逐渐扩大 2019全年超7274亿元 互联
  • Web自动化测试面试

    一 Web 自动化测试 1 Selenium 中 hidden 或者是 display none 的元素是否可以定位到 不能 可以写 JavaScript 将标签中的 hidden 先改为 0 再定位元素 2 Selenium 中如何保证操
  • 安卓APP_ 布局(4) —— TableLayout表格布局

    摘自 安卓APP 布局 4 TableLayout表格布局 作者 丶PURSUING 发布时间 2021 04 11 22 55 50 网址 https blog csdn net weixin 44742824 article detai
  • 集合竞价

    include
  • Linux 创建目录和文件

    mkdir 创建目录 在linux中 mkdir是创建目录的意思 是 make directories 的缩写 该命令用于创建新的目录 语法为 mkdir mp 目录名 设置参数 m 用于手动配置创建目录的权限 设置参数 p 用于递归创建所
  • 苹果Vision Pro手势+眼球融合交互的奥秘

    毫无疑问 Vision Pro在眼球追踪 手势的融合交互体验上 给AR VR头戴设备带来了新突破 在用户体验上的提升非常明显 那么 为什么Vision Pro上这一功能会被如此值得关注呢 为了弄清楚 我们先来看看主流VR设备是如何做的 主流
  • Fatal Python error: init_fs_encoding: failed to get the Python codec of the filesystem encoding

    Fatal Python error init fs encoding failed to get the Python codec of the filesystem encoding Python runtime state core
  • 循迹小车代码应该怎么写?

    循迹小车的代码通常包括以下几个部分 引入库和定义变量 首先需要引入所需的库 并定义各个引脚对应的变量 以便后面的代码可以直接使用 初始化设置 对循迹小车进行初始化设置 如设置电机转向 速度等参数 读取循迹传感器数值 通过循迹传感器读取黑线和
  • 用jQuery编写简单的动画效果

    jQuery是一种基于JavaScript库的快速 小型而且特别丰富的JavaScript库 它极大地简化了HTML文档遍历和操作 事件处理 动画效果和AJAX交互等功能 jQuery中的各种动画函数可以让我们轻松地为网页添加各种各样的动画
  • Leetcode 刷题笔记:字符串篇

    结束了忙碌的期末 终于有了一个月的冬假 赶紧利用这段时间集中精力把Leetcode刷起来 1 Leetcode344 反转字符串 题解 难度 这道题目算是比较基础也是很简单的一道题目了 用双指针的方法可以轻松解决 时间复杂度O N 空间复杂
  • ES集成IK分词器

    一 下载IK分词器 注意版本与ES版本保持一致 下载地址 https github com medcl elasticsearch analysis ik releases 二 下载之后解压到ES的plugin目录 注意新建一个ik目录 解
  • 运行jar包时指定jdk的版本

    set JAVA HOME C Program Files Java jdk1 8 0 153 set CLASSPATH JAVA HOME lib dt jar JAVA HOMe lib tools jar set Path JAVA
  • CryptoPP版本验证

    在使用第三方程序库时 可能会遇到程序库的版本不匹配的问题 下面介绍在使用CryptoPP时 如何验证其版本 代码如下 include
  • 字符串转换成整数

    题目描述 输入一个由数字组成的字符串 把它转换成整数并输出 例如 输入字符串 123 输出整数123 给定函数原型int StrToInt const char str 实现字符串转换成整数的功能 不能使用库函数atoi 分析与解法 本题考
  • 问题:WPS文字提示应用程序已存在该快捷键,请另设快捷键

    1 问题描述 WPS文字 对某一字体样式自定义快捷键 结果提示已存在 如何如何查看已设定快捷键 只针对软件内部冲突 不考虑外部软件影响 我遇到过以下两种情况 1 与自己之前定义的冲突 2 与模板文件冲突 这个不太确定 对于模板冲突 自定义样
  • sqlite的下载安装和配置使用(非常详细)

    sqlite下载链接 Sqlite下载官网 1 这个压缩包中有头文件sqlite3 h以及源码 主要是用到头文件 2 看电脑配置的操作系统或者看所需项目是64位还是32位下载对应的压缩包 3 解压得到这两个文件 sqlite3 def文件用
  • TCP三次握手原理,以及为什么不能改成两次握手

    网上 关于 TCP三次握手 的文章有很多 但很多一些部分讲的含糊其辞 所以才重新造了这个轮子 一方面对那些含糊其辞的部分做了解释 另一方面也方便了以后的学习 1 上图的名词解释 SYN 同步序号 它表示建立连接 TCP规定SYN 1时不能携
  • uniapp如何渲染html模板,uni-app 页面样式

    页面样式与布局 尺寸单位 uni app 支持的通用 css 单位包括 px rpxpx 即屏幕像素 rpx 即响应式px 一种根据屏幕宽度自适应的动态单位 以750宽的屏幕为基准 750rpx恰好为屏幕宽度 屏幕变宽 rpx 实际显示效果