微信小程序: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.mfbz.cn/a/577330.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

相关运算及实现

本文介绍相关运算及实现。 相关运算在相关检测及数字锁相放大中经常用到,其与卷积运算又有一定的联系,本文简要介绍其基本运算及与卷积运算的联系,并给出实现。 1.定义 这里以长度为N的离散时间序列x(n),y(n)为例,相关运算定义如…

OSPF域间路由

注:区域(area)是以接口进行划分的 描述: R1的g0/0/1接口属于area 0 √ R1属于区域0和区域1 1.设计原则 1、OSPF区域的设计原则: 骨干区域有且只能存在一个 非骨干区域必须和骨干区域相连 多区域时&#…

使用JavaScript日历小部件和DHTMLX Gantt的应用场景(一)

DHTMLX Suite UI 组件库允许您更快地构建跨平台、跨浏览器 Web 和移动应用程序。它包括一组丰富的即用式 HTML5 组件,这些组件可以轻松组合到单个应用程序界面中。 DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表,可满足项目管理应用…

深入了解MySQL:从基础到特性,全面解读关系数据库管理系统的历史与应用

文章目录 1. MySQL简介1.1 概述1.2 架构与兼容性1.3 开源与社区支持 2. MySQL的历史2.1 创始与初衷2.2 发展历程2.3 在Oracle的持续发展2.4 开源与商业结合 3. MySQL的核心特性4. MySQL在实际应用中的作用4.1 网站建设与内容管理4.2 商业智能与客户关系管理4.3 企业级应用与云集…

新媒体运营-----短视频运营-----PR视频剪辑----抠像及美颜磨皮

新媒体运营-----短视频运营-----PR视频剪辑-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/138079659 文章目录 1. 超级键抠像绿(蓝)幕背景2. 常规视频抠像3. 美颜磨皮 1. 超级键抠像绿(蓝)幕背景 如果我们的素材是在摄影棚进行…

【R语言实战】——kNN和朴素贝叶斯方法实战

🍉CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一|统计学|干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项,参与研究经费10w、40w级横向 文…

.net8系列-04图文并茂手把手教你配置Swagger支持token以及实现Swagger扩展,Swagger代码单独抽离

前情提要 接上篇文章,我们当前已完成如下内容: 创建应用成功创建接口成功配置Swagger实现接口注释和版本控制 本文章主要内容为:配置Swagger支持token传值测试接口 快速上手-代码配置 添加如下代码 文件目录:\xiaojinWebAppl…

06_Scala流程控制

文章目录 [toc] 1.流程控制**小结:** **2. Scala中流程控制没有三元运算符****2.1 Scala中如果逻辑代码只有一行可以省略花括号****小结:** **3. 循环控制****3.1 for控制****3.2循环守卫 --> 循环表达式添加逻辑判断****3.3 循环步长 --> 表示循环…

​「Python大数据」词频数据渲染词云图导出HTML

前言 本文主要介绍通过python实现数据聚类、脚本开发、办公自动化。词频数据渲染词云图导出HTML。 一、业务逻辑 读取voc数据采集的数据批处理,使用jieba进行分词,去除停用词词频数据渲染词云图将可视化结果保存到HTML文件中二、具体产出 三、执行脚本 python wordCloud.p…

Flutter - 折叠面板

demo 地址: https://github.com/iotjin/jh_flutter_demo 代码不定时更新,请前往github查看最新代码 flutter 自定义折叠组件 支持三种类型和两种展示效果可自定义title和被折叠的内容 效果图 示例 import package:flutter/material.dart; import /jh_common/widge…

Faust勒索病毒:了解变种faust,以及如何保护您的数据

导言: 近年来,网络安全问题日益严峻,其中勒索病毒成为了一种日益猖獗的威胁。在众多勒索病毒中,.faust勒索病毒以其高度的隐秘性和破坏性引起了广泛关注。本文91数据恢复将深入剖析.faust勒索病毒的威胁特点,并提出相…

#ESP32S3N8R8(按键点灯)

一、按键对应端口为GPIO0&#xff08;上拉&#xff09; 二、代码 #include <stdio.h> #include "driver/gpio.h" #include "freertos/FreeRTOS.h" #include "freertos/task.h" #include "unistd.h"void app_main(void) {int co…

JavaSE字节缓冲流

欢迎来到 请回答1024 的博客 &#x1f353;&#x1f353;&#x1f353;欢迎来到 请回答1024的博客 关于博主&#xff1a; 我是 请回答1024&#xff0c;一个追求数学与计算的边界、时间与空间的平衡&#xff0c;0与1的延伸的后端开发者。 博客特色&#xff1a; 在我的博客中&a…

ElasticSearch 安装(docker)

下载安装包 阿里云链接&#xff1a; elasticSearch.exe https://www.alipan.com/s/3A356NnmWaJ 提取码: 93da 点击链接保存&#xff0c;或者复制本段内容&#xff0c;打开「阿里云盘」APP &#xff0c;无需下载极速在线查看&#xff0c;视频原画倍速播放。 安装步骤 1、首先…

【介绍下OneFlow概念清单】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

INA226模块驱动代码-STM32F103

模块&#xff1a; 平台:STM32F103C8T6 标准库 软件模拟IIC C文件&#xff1a; #include "ina226.h"//delay static void delay_nns(uint16_t D) //30纳秒ns 根据手册要用到IIC的HS高速模式 {while(--D); }void delay_nms(uint16_t ms) //毫秒 {uint16_t i;uint3…

Android Dalvik虚拟机JNI方法的注册过程分析

Dalvik虚拟机在调用一个成员函数的时候&#xff0c;如果发现该成员函数是一个JNI方法&#xff0c;那么就会直接跳到它的地址去执行。也就是说&#xff0c;JNI方法是直接在本地操作系统上执行的&#xff0c;而不是由Dalvik虚拟机解释器执行。由此也可看出&#xff0c;JNI方法是A…

欧科云链:为什么减半对比特币生态的影响正在逐步“减弱”?

出品&#xff5c;OKG Research 作者&#xff5c;Jason Jiang 欧科云链OKLink数据显示&#xff0c;比特币于区块高度840000&#xff08;北京时间2024年4月20日8:09&#xff09;成功完成第四次减半&#xff0c;比特币挖矿奖励正式由6.25BTC减少至3.125BTC。此次减半之后&#x…

微信小程序:11.本地生活小程序制作

开发工具&#xff1a; 微信开发者工具apifox进行创先Mock 项目初始化 新建小程序项目输入ID选择不使用云开发&#xff0c;js传统模版在project.private.config中setting配置项中配置checkinalidKey&#xff1a;false 梳理项目结构 因为该项目有三个tabbar所以我们要创建三…

Mysql_数据库事务

文章目录 &#x1f60a; 作者&#xff1a;Lion J &#x1f496; 主页&#xff1a; https://blog.csdn.net/weixin_69252724 &#x1f389; 主题&#xff1a; MySQL__事务&#xff09; ⏱️ 创作时间&#xff1a;2024年04月26日 ———————————————— 这里写目…
最新文章