10.小程序样式

河马开源 河马开源 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 600+累计阅读 654平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄14年
关注
原创 2023-08-20 15:19:05 654 阅读 AI 写同款· GEO 优化 ›

样式

css部分样式不支持，并且添加了rpx属性，小程序开发的时候应该使用rpx，而不是px，因为rpx是将移动端的屏幕大小分为750份，会自动按设备的大小去适配；我们在开发时应该以iphone6为基准的设备进行开发，因为iphone的屏幕宽度为375px，对应rpx的关系就是1rpx为0.5px，计算起来方便。

rpx与px的换算

rpx换算成px

屏幕宽度/750，例如：iphone6为375px/750为0.5

px换算成rpx

750/屏幕宽度，例如：iphone6为750/375px为2

标签
#javascript #前端 #html
微信小程序 rpx和px转换 前言 微信小程序使用的是rpx 不管屏幕宽度是多少，将宽度划分成750份，1份就是1rpx 获取屏幕真实的宽度 wx.getSystemInfoSync().windowWidth rpx和px转换公式 1rpx = (屏幕实际宽度/750)px 即 1rpx = (wx.getSystemInfoSync().windowWidth/750)px rpx和px转换公式为： rpx单位数值 * wx.getSystemInfoSync().windowWidth/750 -> px单位数值 举 阅读详情

相关推荐

微信小程序----引入Vant框架

参考https://vant-contrib.gitee.io/vant-weapp/#/quickstart 已经安装过node（版本在10以上）

weixin_44051855的博客 1890

腾讯云CodeBuddy+微信小程序：10分钟打造极简待办清单

本文详细介绍了如何利用腾讯云CodeBuddy这一AI助手，在10分钟内快速开发一个极简的微信小程序待办清单。通过自然语言对话，即可完成从页面搭建、逻辑注入到样式美化的全流程，无需深厚的前端基础，极大地降低了小程序开发门槛。

weixin_29221753的博客 684

【微信小程序】全局样式、局部样式、全局配置

🐚作者简介苏凉（专注于网络爬虫，数据分析，正在学习前端的路上）👑名言警句海阔凭鱼跃，天高任鸟飞。📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！

苏凉.py的博客 6092

微信小程序wxss设置样式说明文档

对于以前搞客户端开发的来说，有着客户端的逻辑，就是不知道怎么设置微信小程序样式，把对应的控件显示出来 一、wxml 微信小程序界面结构wxmL比较容易理解，微信小程序主要是由八大类基础组件构成： 一、视图容器(View Container)： 二、基础内容(Basic Content) 组件名 说明 组件名 说明 view 视图容器 icon ...

云度 3792

微信小程序wxss公共样式

感觉可以闲几天，存了备份，还未整理许多项目中遇到的实际问题，先把的wxss(即css)公共样式整理上来（后期自己会搭建自己的网站） 如果各位有什么建议和问题，欢迎留言，看到一定会及时反馈 注：个人喜欢在公共样式加区别类的前缀（比如：app- 、 maskCom-等） 话不多说：先附代码了（为了方便复制，分开写了，复制即可用，里面含备注，可删） 样式会及时整理更新~~~ 基本公共样式 p...

老街的酒香 9065

web和微信小程序设置placeholder样式

在页面布局时经常会用到`input`输入框，有时为了提示用户输入正确的信息，需要用`placeholder`属性加以说明。`placeholder` 是`HTML5` 中新增的一个属性，需要注意浏览器的兼容性。。`placeholder`可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。比如：我们在登录时需要输入用户名和密码，它会提示你什么地方输入用户名，什么地方输入密码，这个就是使用的`placeholder`属性。

小马甲 2609

微信小程序——前端——抵扣券、优惠券样式

微信小程序——前端——抵扣券、优惠券样式 效果图： 实现思路： 左边+划线+右边==使用信息+分割线+使用限制 整体底色： .wrapper { margin: 0 auto; width: 100%; display: flex; background:linear-gradient(-90deg,rgba(250,173,82,1),rgba(254,50,103,1)); ...

qq_42404383的博客 6940

微信小程序---常用样式和组件

在开 Web 网站的时候：页面的结构由HTML进行编写，例如：经常会用到divpspanimga等标签页面的样式由CSS进行编写，例如：经常会采用.class#idelement等选择器但在小程序中不能使用HTML标签，也就没有DOM和BOM，同时仅仅支持部分CSS选择器不过不用担心，小程序中提供了同样的角色：其中WXML充当的就是类似HTML的角色，只不过在WXML中没有divpspanimga等标签，在WXML中需要使用 小程序提供的viewtextimagenavigator。

m0_56769104的博客 1277

微信小程序中多个相同的组件点击时当前样式的改变

第一次用优快云写博客，以前的是新浪博客，地址为：http://blog.sina.com.cn/99yt99 以后一直就用优快云，新浪上面就不更新了。1、需要的东西  一张透明背景的图片：proper.png     2、效果展示  默认选中与样式改变的为“距离优先”，当然自己可以在ceshi.js中改变自己想默认的那个。通过点击切换改变样式）3、源码：wxml代码<view class...

Syleapn的博客 1万+

微信小程序样式大全（一）

1.尺寸 pt:逻辑分辨率； pt的大小与屏幕的尺寸有关系，简单可以理解为长度和视觉单位 px:指物理分辨率,和屏幕尺寸没关系 1个pt可以有1个px构成，也可以有2个px,还可以有3个甚至更多 iphone6是由2个px构成的 以iphone6的物理像素750*1334为视觉稿进行设计，而在小程序中使用rpx为单位 iphone6下 1px = 1rpx = 0.5pt 使用rpx...

lyp_story的博客 5048

rpx与px换算

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。 规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px 设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) iPhone5 1rpx = 0.42px 　　1px =......

qq_39702981的博客 1万+

如何在微信小程序中使用样式和布局

在上面的代码中，我们为container组件设置了display属性为flex，flex-direction属性为column，align-items属性为center，justify-content属性为center，这样就实现了垂直居中的布局效果。在上面的代码中，我们为view组件设置了class为container的类选择器，为text组件设置了class为title的类选择器，为button组件设置了id为btn的id选择器。在上面的代码中，我们使用view组件分别设置了多个item，并通过类。

m0_75244442的博客 724

微信小程序开发中的多端兼容与适配

总结 本文介绍了微信小程序开发中多端兼容与适配的相关内容，包括响应式布局、样式适配、组件适配、API适配和数据适配等。由于不同的终端设备有不同的屏幕尺寸、处理能力和操作方式，开发者需要根据不同的终端设备进行适配，以确保在不同的设备上都能正常运行和展示。在多端兼容与适配中，需要注意根据不同的终端设备选择合适的API并进行适配。在不同的设备上，组件的样式和行为可能有所不同，开发者可以根据需要进行适配。调试和测试 在开发过程中，需要进行不同终端设备上的调试和测试，以确保页面在不同设备上正常运行和展示。

m0_75244442的博客 853

Chapter 19 Digital Phase-Locked Loops

数字锁相环 Digital Phase-Locked Loops, 就是根据原来时钟信号, 产生新的时钟信号, which is locked or synchronized. (align 参考时钟边沿 or 在中间)

2304_76736886的博客 973

Zemax操作--2（单透镜和双胶合透镜优化）

单透镜 要求 镜头数据里面的数量变化后要重新设计优化函数 设计 一、初始参数 按照要求输入波长、入瞳孔径、视场数据编辑器如图 物面--透镜前表面--透镜后表面--相面（镜头数据再插入一个面如图） 将2面曲率半径F数设置为10，zemax自动给出合适值 设置面2的边缘光线高度，zemax自动给出合适值 二、评价参数设置 将面1曲率半径设置为变量 再设置评价函数告诉zemax我们需要什么条件，评价函数默认即可 执行优化 双胶合透镜 要求 ...

lzy750750的博客 1万+

DNS入侵检测 datacon2020

DNS入侵检测 datacon2020。

weixin_51491521的博客 523

关于Arduino中的常用函数

一、I/O函数 二、时间函数 三、数学函数 abs 返回其参数的无符号值 【abs（12）返回12，abs（-12）也返回12】 constrain 限制一个数字以阻止它超出范围。第一个参数是被限制的数字，第二个参数是范围区间的开始，第三个参数是允许的数字范围区间的结尾。 【constrain（8,1，10）返回8，constrain（11,1，10）返回10，constrain（0,1，10）返回1】 map 将一个范围内的数字映射到另一个范围。第一个参数是要映射到数字，第二个和第三个参数是from范围（

TREE的博客 7323

UQLab——其他概率分布随机变量转换标准Gaussian分布

1、使用UQLab将其他类型的随机变量转换成标准Gaussian分布； 2、使用科学计数法输出样本，方便后续ANSYS的调用分析； 3、基于MC的可靠度分析。 原随机变量分布类型： % 调用UQLab进行采样 clc clear uqlab %% Specify these distributions as a UQLab INPUT object: PriorOpts.Marginals(1...

ikhui7的博客 3014

tmux + Claude Code 远程开发指南：从 WSL 配置到断线无忧

远程开发中，SSH 连接中断常导致后台任务丢失，这是困扰开发者的经典难题。tmux 作为终端复用器，通过将进程挂在常驻会话中，使其脱离 SSH 连接独立运行，从根本上解决了断线导致的任务终止问题。Claude Code 等 AI 编程代理需要长时间运行并保持交互上下文，恰好依赖这种会话持久化能力。结合 Windows Subsystem for Linux 提供类 Unix 环境，开发者可在 Windows 上实现稳定的远程开发工作流。本文将完整介绍从 WSL 环境配置、tmux 会话管理，到与 Claud

weixin_30423065的博客 348

Codex入门19-数据库操作（解放双手：用自然语言写SQL、建表和数据迁移）

写 SQL 是后端开发的日常，但复杂的 JOIN、子查询、窗口函数总让人头疼。本文教你用 Codex CLI 实现：自然语言直接生成 CREATE TABLE、复杂 SQL 查询、数据库迁移脚本（Prisma/Knex/Alembic）、ORM 模型代码（SQLAlchemy/TypeORM）、甚至自动生成数据库文档。重点强调安全红线——永远不要让 AI 直接连接生产数据库。从需求描述到完整数据库层代码，一篇搞定。

yueyeguzhuo的专栏 234

王者荣耀AI绝悟如何选英雄？

王者荣耀AI绝悟如何选英雄？ 【抢射手？抢中单位？「绝悟」在打王者荣耀时是如何选英雄的？】 腾讯 AI Lab 开发的 AI 智能体「绝悟」已让王者峡谷不再只是人类召唤师的竞技场，而且这个 AI 战队在上月底进化成了「完全体」。在一局完整的比赛中，英雄选择阶段是至关重要的(比如五射手或五法师阵容会有官方劝退)。 近日，腾讯 AI Lab 和上海交通大学发布的一篇论文介绍了绝悟的英雄选择策略：Ju...

不断学习，不断进步，提高自己 1万+

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。，新界面，新视觉，

温度PID控制PLC程序

温度PID稳定控制程序，适用于欧姆龙PLC，对其他PLC也具有很大参考价值

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

文档：亲测可用解决vnc灰屏，黑屏，鼠标大黑叉情况

主要解决vnc-viewer灰屏，黑屏，鼠标大黑叉等现象，详细见文档。
上一篇： 9.条件渲染
下一篇： 11.小程序的配置项
点赞 0
评论 2
书签 书签 1
河马开源
河马开源
博客等级 码龄14年 103粉丝 117原创
+ 关注 专栏目录 订阅专栏
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

河马开源

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值