【小程序】wxss与rpx单位以及全局样式和局部样式

news2024/11/9 2:37:59

目录

WXSS

1. 什么是 WXSS

2. WXSS 和 CSS 的关系

rpx

1. 什么是 rpx 尺寸单位

2. rpx 的实现原理

3. rpx 与 px 之间的单位换算*

样式导入

1. 什么是样式导入

2. @import 的语法格式

全局样式和局部样式

1. 全局样式

2. 局部样式

WXSS

1. 什么是 WXSS

WXSS (WeiXin Style Sheets)是一套样式语言,用于美化 WXML 的组件样式,类似于网页开发中

的 CSS。

2. WXSS 和 CSS 的关系

WXSS 具有 CSS 大部分特性,同时,WXSS 还对 CSS 进行了扩充以及修改,以适应微信小程序

的开发。 与 CSS 相比,WXSS 扩展的特性有:  

rpx 尺寸单位  

@import 样式导入

rpx

1. 什么是 rpx 尺寸单位

rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。

2. rpx 的实现原理

rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有

设备的屏幕,在宽度上等分为 750 份(即:当前屏幕的总宽度为 750rpx)。 在较小的设备上,

1rpx 所代表的宽度较小 在较大的设备上,1rpx 所代表的宽度较大 小程序在不同设备上运行的时

候,会自动把 rpx 的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。 

3. rpx 与 px 之间的单位换算*

在 iPhone6 上,屏幕宽度为375px,共有 750 个物理像素,等分为 750rpx。则: 750rpx = 375px

= 750 物理像素     1rpx = 0.5px  = 1物理像素

官方建议:开发微信小程序时,设计师可以用 iPhone6 作为视觉稿的标准。 开发举例:在

iPhone6 上如果要绘制宽100px,高20px的盒子,换算成rpx单位,宽高分别为 200rpx 和 40rpx。 

样式导入

1. 什么是样式导入

使用 WXSS 提供的 @import 语法,可以导入外联的样式表。

2. @import 的语法格式

@import 后跟需要导入的外联样式表的相对路径,用 ; 表示语句结束。示例如下:

全局样式和局部样式

1. 全局样式

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。

2. 局部样式

在页面的 .wxss 文件中定义的样式为局部样式,只作用于当前页面。 注意: 当局部样式和全局样

式冲突时,根据就近原则,局部样式会覆盖全局样式 当局部样式的权重大于或等于全局样式的权

重时,才会覆盖全局的样式

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/108613.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux网络与数据封装

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起探讨和分享Linux C/C/Python/Shell编程、机器人技术、机器学习、机器视觉、嵌入式AI相关领域的知识和技术。 Linux网络与数据封装1. 网络应用程序的设计模式(1)C/S架构(2&#…

VRTK4 入门指南

VRTK4 说明文档VRTK Farm Yard 示例 - Virtual Reality Toolkit要求使用 Unity 2020.3.24f1.Beta 免责声明简介入门下载项目在 Unity 中打开下载的项目使用 Unity Hub在 Unity 中打开项目运行示例场景Made With VRTK贡献第三方包许可证VRTK Farm Yard 示例 - Virtual Reality T…

家居建材行业数字化重构,依靠CRM打通全流程

国家十四五规划提出大力推进产业数字化转型,如今各行各业数字化进程如火如荼,传统行业将数字化转型视为重塑产业竞争力的重要途径。因此,即便是数字化率平均只有10%的家具建材业,也在积极进行全生命周期的产品数字化、全域营销数字…

加载速度提升 15%,关于 Python 启动加速探索与实践的解析 | 龙蜥技术

编者按:在刚刚结束的 PyCon China 2022 大会上,龙蜥社区开发者严懿宸分享了主题为《Python 启动加速的探索与实践》的技术演讲。本次演讲,作者将从 CPython 社区相关工作、本方案的设计及实现,以及业务层面的集成等方面进行介绍。…

Python基础知识入门(四)

Python基础知识入门(一) Python基础知识入门(二) Python基础知识入门(三) 一、条件控制 条件语句是通过一条或多条语句的执行结果(True 或者False)来决定执行的代码块。 注意&…

使用CMake编译基于OpenCV开发的程序的方法

方法 使用CMake编译OpenCV开发的程序分为以下几个步骤: 安装编译器和代码编辑器。 Windows安装Visual Studio社区版,集成了编译器和代码编辑器。Ubuntu安装gcc、g和VSCode: sudo apt install gcc gcmacOS安装XCode Commandline Tools和VS…

R语言应用xgboost进行机器学习(1)

XGBoost 机器学习模型是一种高效且可扩的展的机器学习分类器,由 Chen 和 Guestrin 在 2016 年推广。XGBoost原理是是在决策树的基础上产生迭代,它以 boosting 的方式结合了多个决策树。通常创建每棵新树是为了通过梯度提升来减少先前模型的误差&#xff…

鸿翼档案,将非结构化数据治理能力应用于档案管理的先行者

数字化时代,每个人每天都要接触大量的数据。人们通过分析数据获取信息与知识,帮助自身更好地理解社会动向,掌握行业发展。我们每天都会接触到多种多样的数据,这些数据根据结构可划分为三种:结构化数据、非结构化数据和…

Android设计模式详解之责任链模式

前言 责任链模式是行为型设计模式; 定义:使多个对象都有机会处理请求,从而避免了请求的发送者和接收者之间的耦合关系。将这些对象连成一条链,并沿着这条链传递该请求,直到有对象处理它为止。 使用场景:…

基于概率论的MATLAB仿真,内容包括非共轭条件下的后验概率的推导,共轭条件下的非完备集的后验概率的推导

目录 1.算法描述 2.仿真效果预览 3.MATLAB核心程序 4.完整MATLAB 1.算法描述 1.1先验概率的推导 根据贝叶斯概率论可知,某一事件的后验概率可以根据先验概率来获得,因此,这里首先对事件的先验概率分布进行理论的推导。假设测量的腐蚀数据…

[一个无框架的javaweb demo]番荒之冢 --番剧灯塔站

文章目录番荒之冢 --番剧灯塔站理念大致设计权限分配番剧信息用户/管理员信息邮箱正则匹配URL正则匹配留言信息数据库设计useranimationcommentfavoranim技术栈(无框架)功能一个简单的登录(进行了路由限制, 若未登录都会跳转至此)首页我的我的资料追番清单留言区番剧详情退出登…

华为云-计算云服务介绍

前言 相信很多小伙伴在刚开始接触各类云产品的时候,被各种各样的云产品类如规格、型号、价格、适用场景等问题所困扰。本文就给大家介绍一下华为云常见云产品的规格区别和适用场景。帮助大家选择合适的云产品。 文章目录前言一、计算云服务1.弹性云服务器2.裸金属服…

Apache Flink 部署模式

目录 会话模式 Session Mode 单作业模式 Per-Job Mode (deprecated) 应用模式 Application Mode 在一些应用场景中,对于集群资源分配和占用的方式,可能会有特定的需求。Flink 为各种场景提供了不同的部署模式,主要有以下三种: i…

ArcGIS | NetCDF数据在ArcMap中的使用

NetCDF又称科学数据集,可以存储温度、湿度、风速、风向等多个维度的文件格式。以中国区域地面气象要素驱动数据集为例进行介绍。 中国区域地面气象要素驱动数据集,包括近地面气温、近地面气压、近地面空气比湿、近地面全风速、地面向下短波辐射、地面向…

P6 PyTorch 常用数学运算

前言: 这里主要介绍一下PyTorch 的常用数学运算 目录: 1: add|sub 加减法 2: mul/div 乘/除运算 3: 矩阵乘法 4 2D矩阵转置 5 其它常用数学运算 6 clamp 梯度剪裁 一 加减法 1.1 加法 可以直接通过符号 或者 torch.add # -*- co…

MySQL数据库的安装、创建库及连接取数

安装MySQL数据库MySQL数据库简介安装MySQL数据库下载安装包安装MySQLMySQL创建一个新的数据库,并在其中创建新的数据表,填充测试数据并查看mysql>模式下输入的每句sql语句都要以;结尾;若多行语句无;,则被默认为一条语句未输入完…

UNIX环境高级编程——1.UNIX基础知识

UNIX基础知识 UNIX体系结构 严格意义上来说,可以将操作系统定义为一种软件,控制计算机硬件资源,提供程序运行环境。通常把这种软件成为内核。内核的接口被成为系统调用(system call)。公共函数库构建在系统调用接口之…

碳酸锂、碳酸氢锂除钙镁离子交换柱

锂及其盐类是国民经济和国防建设中具有重要意义的战略物资,也是与人们生活息息相关的能源材料。而碳酸锂作为锂盐的基础盐,是制取锂化合物和金属锂的原料,可作铝冶炼的电解浴添加剂,亦可用于合成橡胶、染料、半导体等方面。电池级…

Orin+ GMSL (Ser 9295+Des 9296)流程分析(1)

文章目录 1 前言2 流程分析2.1 整体架构2.2 Ser端2.2 Des端2.3 软件架构2.4 设备树文件分析2.5 VI 接口2.7 CSI 接口1 前言 Maxim 支持GMSL作为汽车行业视频应用的通信链路。GMSL基于SerDes (Serializer-Deserializer)技术;也就是说,它在发送端使用序列化器,在接收端使用反序…

观察UE4中引用查看器(ReferenceViewer)是从哪得到数据的

前言 引用查看器(ReferenceViewer)可以显示资源引用关系数据,我想要知道这个数据是如何得到的。因此从它的界面代码开始一步步往里看。 (到最后才发现,得到引用关系数据的接口很简单,而且是蓝图可访问的,详见本篇的【…