微信小程序:8.WXSS

news2024/12/30 3:39:32

WXSS和CSS的关系

WXSS具有CSS大部分特性,同时,WXSS还对CSS进行扩充以及修改,适应微信小程序的开发。
与CSS相比,WXSS扩展的特性有:

  • rpx尺寸单位
  • @imprt样式导入

CleanShot 2024-04-22 at 10.27.47@2x.png

rpx尺寸单位

rpx是微信小程序中独有的,用来解决屏幕适配的尺寸单位。

rpx实现原理

rpx,根据不同设备的屏幕大小进行适配,为了实现屏幕的自动适配,rpx把所有的设备屏幕,在宽度上把整个屏幕分为750份

  • 在小设备上,1px所代表的宽度较小
  • 在大设备上,1rpx代表的宽度较大

小程序不同设备运行的时候rpx会根据设备进行换算渲染,从而实现屏幕的适配

rpx和px之间的单位换算

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

样式导入

@import 的语法格式

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

.small-p{
  padding:5px;
}

app.wxss

@import "common.wxss"
.middle-p{
padding:15px
}

全局样式

定义在app.wxss中的样式是全局样式,样式会应用在小程序中每一个页面

局部样式

wxss适用于当前页面样式
注意:

  1. 当局部样式和全局样式发生冲突的时候,根据就近原则,局部样式会覆盖全局样式
  2. 当局部样式的权重大于或者等于全局样式的权重时候,才会覆盖全局样式

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

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

相关文章

第三节课,后端登录【1】.2--本人

一、视频链接 网址: 后端用户脱敏和session-CSDN直播 二、代码开始 2.1 新建一个request参数。完成用户登录态键 快捷建, 全局变量 代码: // 3.记录用户的登录态/*** 这段代码是Java Web开发中的一部分,用于在会话&#xff08…

面试:finalize

一、概述 将资源释放和清理放在finalize方法中非常不好,非常影响性能,严重时甚至会引起OOM(Out Of Memory),从Java9开始就被标注为Deprecated,不建议被使用了。 二、两个重要的队列 1、unfinalized 队列 当…

为什么 Facebook 不使用 Git?

在编程的世界里,Git 就像水一样常见,以至于我们认为它是创建和管理代码更改的唯一可行的工具。 前 Facebook 员工,2024 年 首先,我为什么关心? 我致力于构建 Graphite,它从根本上受到 Facebook 内部工具的…

FSMC读取FPGA的FIFO

一、硬件说明 FSMC配置 单片机的代码如下: #define VALUE_ADDRESS_AD1 (__IO uint16_t *)0x60400000while (1){if(!HAL_GPIO_ReadPin(GPIOF, GPIO_PIN_8)) //数据非空{data *(__IO uint16_t *)VALUE_ADDRESS_AD1;data2 *(__IO uint16_t *)VALUE_ADDRESS_AD1…

网上订餐系统,基于 SpringBoot+Vue+MySQL 开发的前后端分离的网上订餐系统设计实现

目录 一. 前言 二. 功能模块 2.1. 用户功能模块的实现 2.2. 管理员功能模块的实现 三. 部分代码实现 四. 源码下载 一. 前言 随着我国经济的飞速发展,人们的生活速度明显加快,在餐厅吃饭排队的情况到处可见,近年来由于新兴IT行业的空前…

python的turtle库画直线

1.画一条直线 让画笔从(0,0)划到(100,100),在turtle中画笔是一只小乌龟。 import turtle turtle.setup(800,800,0,0)#turtle.setup(width,height,startx,starty)来设置窗口初始位置及大小 turtle.goto(100,100)2.画一条折线 left和right使小…

安装crossover游戏提示容量不足怎么办 如何把游戏放到外置硬盘里 Mac电脑清理磁盘空间不足

CrossOver作为一款允许用户在非原生操作系统上运行游戏和应用程序的软件,为不同平台的用户提供了极大的便利。然而,随着游戏文件大小的不断增加,内置硬盘的容量往往无法满足安装需求。幸运的是,通过一些简单的步骤,我们…

怎么样解决web图片加载未更新问题|浏览器图片未更新问题

问题列举 为什么我本地资源改变但是我在用 tomcat 预览网页时图片仍然未之前的图片? 为什么我当前网页的图片是之前的我换浏览器就变了? tomcat启动后,为什么访问项目中的图片无效解决? 解决方案 问题一 为什么我本地资源改变但是我在用 tomcat 预览网页时…

关于使用SpringSecurity框架发起JSON请求,但因登陆失效导致响应403的问题。

这里记录一个生产中遇到的一个问题。 现有环境是基于SpringBoot 2.6.8,然后是前后台一体化的项目。 安全框架使用的是内置版本的SpringSecurity。 在实际使用过程中遇到一个问题。 就是当用户登陆失效后,前端操作JSON请求获取列表数据,但…

编程学习路线

Java最强学习路线 快来官网定制一套属于自己的学习路线吧 官方网址: Learn to become a modern Java developerCommunity driven, articles, resources, guides, interview questions, quizzes for java development. Learn to become a modern Java developer by…

架构师系列- 消息中间件(12)-kafka基础

1、应用场景 1.1 kafka场景 Kafka最初是由LinkedIn公司采用Scala语言开发,基于ZooKeeper,现在已经捐献给了Apache基金会。目前Kafka已经定位为一个分布式流式处理平台,它以 高吞吐、可持久化、可水平扩展、支持流处理等多种特性而被广泛应用…

go 测试和文件

go 测试和文件 需求传统测试单元测试牛刀小试总结练习文件介绍打开关闭文件读文件一次性读取文件写文件文件或文件夹是否存在文件拷贝 需求 有一个函数&#xff0c;怎样确认他运行结果是正确的&#xff1f; func addUpper(n int)int {res : 0for i : 1; i < n; i {res1}r…

牛客NC368 质数的计数【中等 基础数学,数论 C++/Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/190167d1990442da9adb133980259a27 思路 判断x是否是质数&#xff1a;这是判断质数最好的代码了public boolean isPrime(int x){if(x 2 || x3) return true;if(x%6!1 && x%6!5) return false; //不在6倍…

微服务之分布式理论概述

一、分布式技术相关的理论 CAP理论 CAP定理(CAP theorem)&#xff0c;⼜被称作布鲁尔定理(Eric Brewer)&#xff0c;1998年第⼀次提出. 最初提出是指分布式数据存储不可能同时提供以下三种保证中的两种以上: (1) ⼀致性(Consistency): 每次读取收到的信息都是最新的; (2) …

7天入门Android开发之第1天——初识Android

一、Android系统 1.Linux内核层&#xff1a; 这是安卓系统的底层&#xff0c;它提供了基本的系统功能&#xff0c;如内存管理、进程管理、驱动程序模型等。安卓系统构建在Linux内核之上&#xff0c;借助于Linux的稳定性和安全性。 2.系统运行库层&#xff1a; 这一层包括了安卓…

Python用于高级异常检测和聚类的工具库之BanditPAM使用详解

概要 Python BanditPAM库是一个用于高级异常检测和聚类的工具,具有强大的特性和灵活的功能,可以发现数据中的异常点并进行有效的聚类分析。本文将详细介绍Python BanditPAM库的安装、特性、基本功能、高级功能以及总结。 安装 首先,需要安装Python BanditPAM库。 可以使用…

Hadoop之路

hadoop更适合在liunx环境下运行&#xff0c;会节省后期很多麻烦&#xff0c;而用虚拟器就太占主机内存了&#xff0c;因此后面我们将把hadoop安装到wsl后进行学习,后续学习的环境是Ubuntu-16.04 &#xff08;windows上如何安装wsl&#xff09; 千万强调&#xff0c;有的命令一…

Python-VBA函数之旅-list函数

目录 一、list函数的常见应用场景&#xff1a; 二、list函数使用注意事项&#xff1a; 三、如何用好list函数&#xff1f; 1、list函数&#xff1a; 1-1、Python&#xff1a; 1-2、VBA&#xff1a; 2、推荐阅读&#xff1a; 个人主页&#xff1a;https://blog.csdn.net…

2015-2023年上市公司商道融绿ESG评级数据

2015-2023年上市公司商道融绿ESG评级数据 1、时间&#xff1a;2015-2023年 2、来源&#xff1a;整理自WIND 3、指标&#xff1a;代码、名称、商道融绿ESG评级 4、范围&#xff1a;上市公司 5、指标解释&#xff1a; 商道融绿ESG评级体系是一种全新的评级体系&#xff0c;…

Restful API 具体设计规范(概述)

协议 https 域名 https://www.baidu.com/api 版本 https://www.baidu.com/v1 路径 https://www.baidu.com/v1/blogs 方法 数据过滤 状态码返回结果 返回的数据格式 尽量使用 JSON&#xff0c;避免使用 XML。 总结&#xff1a; 看 url 就知道要什么看 http method 就知道干…