微信小程序:8.WXSS

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.hqwc.cn/news/652579.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

elasticsearch 常用语法汇总

文章目录 前言elasticsearch 常用语法汇总1. 创建索引2. 检索索引信息3. 删除索引4. 文档操作4.1. 对blog_new索引指定文档ID新增4.2. 对blog_new索引不指定文档ID新增,随机文档ID:4.3. 获取文档4.4. 更新文档4.5. 删除文档 5. 查询5.1. 匹配查询5.2. 范围查询5.3. …

【golang学习之旅】Go 的循环结构

系列文章 【golang学习之旅】报错:a declared but not used 【golang学习之旅】Go 的基本数据类型 目录 系列文章for循环基本的for循环for 变 while死循环 for-range for循环 Go 只有一种循环结构:for 循环 基本的for循环 和C以及Java语言一样&#xf…

社区新零售:重构邻里生活圈,赋能美好未来

新时代的邻里脉动 在城市的肌理中,社区作为生活的基本单元,正经历一场由新零售引领的深刻变革。社区新零售,以其独特的商业模式、创新的技术手段和以人为本的服务理念,重新定义了社区商业的边界,重构了邻里生活的形态…

【算法基础实验】图论-基于DFS的连通性检测

基于DFS的连通性检测 理论基础 在图论中,连通分量是无向图的一个重要概念,特别是在处理图的结构和解析图的组成时。连通分组件表示图中的一个子图,在这个子图中任意两个顶点都是连通的,即存在一条路径可以从一个顶点到达另一个顶…

公园景区伴随音乐系统-公园景区数字IP广播伴随音乐系统建设指南

公园景区伴随音乐系统-公园景区数字IP广播伴随音乐系统建设指南 由北京海特伟业任洪卓发布于2024年4月23日 随着“互联网”被提升为国家战略,传统行业与互联网的深度融合正在如火如荼地展开。在这一大背景下,海特伟业紧跟时代步伐,凭借其深厚…

vue实现录音并转文字功能,包括PC端web,手机端web

vue实现录音并转文字功能,包括PC端,手机端和企业微信自建应用端 不止vue,不限技术栈,vue2、vue3、react、.net以及原生js均可实现。 原理 浏览器实现录音并转文字最快捷的方法是通过Web Speech API来实现,这是浏览器…

Swift-31-泛型和类型操作

泛型 Swift泛型(generics) 让我们写出的类型和函数可以使用对于我们或编译器都未知的类型。 很多内建类型(包括可空类型、数组和字典)都是用泛型实现的,比如数组和一些集合就是用泛型方式来实现的。 一种运行时进行类型检查的技术,效率高但是不安全。在…

JAVA前端快速入门基础_javascript入门(01)

写在前面:本文用于快速学会简易的JS,仅做扫盲和参考作用 1.JS是什么 JavaScript是一门跨平台,面向对象的脚本语言(即不需要编译,可以直接通过浏览器进行解释)。JS和Java是两门完全不相同的语言,但是基础的语法是类似的 2.JS的引…

RK3568 学习笔记 : busybox 制作 ext4最小根文件系统

前言 开发板型号: 【正点原子】 的 RK3568 开发板 AtomPi-CA1 使用 VMware 虚拟机 ubuntu 20.04 编译 busybox,并制作 emmc 中的 ext4 根文件系统 rootfs 下载 busybox 可以在 https://busybox.net/downloads/snapshots/ 下载最新的 busybox&#xff…

Linux实验一:Linux环境及编程工具

目录 一、实验目的二、实验内容三、参考代码四、实验步骤步骤1. 编辑源代码test1.c步骤2. 编译源代码test1.c步骤3. 调试test1步骤4. 重新编译运行test1.c 五、实验结果六、实验总结 一、实验目的 1、掌握Linux C开发过程中的基本概念; 2、掌握如vim,GC…

leetcode和相关题目

1. 两数之和 直接利用hashmap存储值和对于索引&#xff0c;利用target-nums[i]去哈希表里找对应数值。返回下标。 class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {unordered_map<int, int> mp;vector<int> res;fo…

CentOS安装SonarQube

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 sonar是一款静态代码质量分析工具,支持Java、Python、PHP、JavaScript、…