WXSS 模板样式详解（rpx和@import）

于 2024-03-08 10:44:58 发布
阅读量400 收藏 9
点赞数 3
分类专栏： 微信小程序开发 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44741577/article/details/136555553
版权
本文介绍了WXSS在微信小程序中的应用，包括其与CSS的关系，rpx作为响应式像素单位的使用，以及样式导入的语法和全局与局部样式的区别。
摘要由CSDN通过智能技术生成

文章目录

一、什么是 WXSS

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

二、 WXSS和CSS的关系

image.png

三、rpx

3.1. 什么是rpx 尺寸单位

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

3.2. rpx的实现原理

image.png

3.3. rpx与px之间的单位换算

image.png

建议： 蓝湖设计稿尺寸制定宽度为750px，则wxss中直接把px换成rpx即可

四、样式导入

4.1. 什么是样式导入

image.png

4.2. @import 的语法格式

注意： ./可以直接省略

image.png

五、全局样式和局部样式

5.1. 全局样式

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

5.2. 局部样式

在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面

image.png

扶苏1002
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
wxss样式表.xlsx
11-27
比较全面的wxss样式表，写Html5页面参考资料,内容包括详细用法和详细说明，写前端必备资料，本文档已收集网上使用频率较高的样式，如有错误或者变更的地方，请在评论中发表
实例教程：使用wxParse解析html，小程序登录
03-29
一：小程序使用wxParse解析html首先去https://github.com/icindy/wxParse下载wxParse，只拷贝wxParse文件夹即可。1、引入wxss@import "../wxParse/wxParse.wxss";2、引入wxmlimport s ...             一：小程序使用wxParse解析html 首先去  https://github.com/icindy/wxParse  下载wxParse，只拷贝wxParse文件夹即可。   1、引入wxss   @import "../wxParse/wxParse.wxss"; 2、引入wxm
【微信小程序】基础篇 -- WXSS 模板样式- rpx & import （十三）
JMFive的博客
02-28 1435
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第13篇文章;今天开始学习微信小程序的第八天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。WXSS (WeiXin Style Sheets)是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS。🌹 🌹 🌹。
WXSS中@import的使用
Q196825的博客
06-09 365
WXSS中@import的使用
微信小程序 - 04_wxss模板样式和全局配置（模板样式_rpx_@import样式导入、全局配置_window_tabBar）
文泽路小男孩的博客
03-07 1504
文章目录wxss模板样式01 什么是wxss1.1wxss和css的关系1.1.1 什么是rpx1.2 样式导入02 全局样式和局部样式2.1 全局样式2.2 局部样式全局配置01 全局配置文件常用配置项1.1 window1.1.1 组成部分1.1.2 常用配置项1.1.3 全局开启下拉刷新功能1.1.4 设置下拉刷新背景色1.1.5 设置下拉刷新时loading的样式1.1.6 设置上拉触底的距离1.2 tabBar1.2.1 tabBar的6个组成部分1.2.2 tabBar结点配置选项1.2.3 每
011WXSS模板样式-样式导入
qq_45448242的博客
09-14 373
WXSS模板样式-样式导入
微信小程序 WXML、WXSS 和JS介绍及详解
10-21
主要介绍了微信小程序 WXML、WXSS 和JS介绍及详解的相关资料,需要的朋友可以参考下
微信小程序wxml和wxss样式
03-29
微信小程序的排版就跟wxml和wxss有关了，它们两者相当于android的布局文件，其中wxml指定了界面的框架结构，而wxss指定了界面的框架及元素的显示样式。 一、wxml 界面结构wxmL比较容易理解，主要是由八大类基础组件...
微信小程序-template模板使用详解
03-29
2.创建的模板文件只能使用wxml和wxss文件，可以在js文件中模拟逻辑操作，但最后这些逻辑操作是要写在调用模板的文件的JS文件中的。因为调用模板的时候,模板中的JS文件是不起作用的，模板中的逻辑都要在调用的文件中...
微信小程序——wxss高级篇讲解（before，after )(.class image)(@import)(＜view class=‘view1 view2‘ / ＞)、wxss中使用变量
wy313622821的博客
11-03 8718
大家有没有遇到这样的一种现象，在看复杂的wxss，会有很多看不懂的地方，比如： 第一种：before ，after .container_1 { width: auto; margin: 30rpx; text-align: center; } .view_1 { position: relative; display: inline-block; font-size: 70rpx; color: red; } /* 在view_1控件之前 */ .view_1::before
WXSS 模板样式 - 样式导入
最新发布
qq_46099629的博客
09-29 192
使用@import导入外部样式表，可以实现样式复用和模块化开发，提高代码的可维护性和重用性。.small-p {
微信小程序学习笔记（4）
Outro_的博客
03-28 280
组件
了解px、rpx、em、rem、%、vw、vh、vm这些的区别，减少兼容bug
huangzhin的博客
08-08 2849
一、背景介绍 随着Web的发展，对新的解决方案的需求也会继续增大，对网页的要求更高。网页设计单位是涉及到我们布局的效果，使用不同的单位会对最终的demo，会有影响。而且现在都是要求响应式设计，需要适配各种设备，电脑，手机，平板。如果单位不合适，可能在这个设备显示良好，那个设备就会打乱布局。所以需要我们选择合适的单位来进行开发，设计。 二、知识剖析 1、px 1）px就是pixel的缩写，意为像素。...
uni-app 通用尺寸单位rpx及样式
热门推荐
记录点滴
12-28 2万+
官方文档： rpx即响应式px，是一种根据屏幕宽度自适应的动态单位。uni-app规定屏幕的基准宽度为750rpx。 关于rpx说明 设计师在提供设计图时，一般只提供一个分辨率的图，作为开发者如果严格按照设计图标注的px做开发，在适配不同宽度的时候很容易变形，而且是宽度变形，因为有滚动条，高度不会出问题。 微信小程序设计了rpx解决了此问题，而uni-app在App端、H5端也都实现了对...
小程序 WXSS样式导入 @import
Abudula__的博客
07-21 1万+
index.wxml text { color: #ff0000; }  index.wxss <text>Hello,Netease</text> import.wxss @import'import.wxss'; 可以通过@import来引入在别的文件中的样式。 
微信小程序 WXML提供import和include两种引用方式的使用，以及WXSS的导入的使用
唐_方的博客
11-29 7432
微信小程序 WXML提供import和include两种引用方式的使用，以及WXSS的导入的使用 wxss引用 wxml引用 一、学习 最近在学习微信小程序，遇到文件的引用问题，记下来。 二、WXML引用 1、WXML引用方式 import include 2、import方式
【微信小程序】WXSS和全局、页面配置
weixin_62542181的博客
07-21 5591
本文对微信小程序的WXSS相对于CSS新增内容进行讲解，以及微信小程序的全局配置，页面配置
微信小程序 @import 的用法
mikyatxy的博客
02-11 4753
【关于求助】file not found : …/lib/weui.wxss 怎么处理？ 微信小程序 weui-wxss 的使用 微信小程序 @import 的用法 #小程序 WXSS样式如何导入 @import 你好！ 如果你有以上的疑问, 可以仔细阅读这篇文章，了解一下@import的基本用法。 index.wxml <text>我是mikyatxy！</text> ...
微信小程序 四 wxss引用 wxml引用
国苏
05-31 1万+
wxss引用 可以看到这是一个列表，每一条可以看做是一个item,item自己会有自己的wxml和wxss,先看一下 item.wxss.item_class{ width: 100%; height: 150rpx; background-color: #ffffff; } .profile_holder{ width: 100%; height: 100rpx; fle
判断对错：微信小程序中样式文件为 wxss，只支持 rpx 一种尺寸单位。
06-08
在微信小程序中，样式文件的后缀名为 wxss，它是一种类似于 CSS 的样式语言，用于定义小程序中各个组件的样式。微信小程序中的尺寸单位只支持 rpx 一种，rpx 是一种相对单位，它会根据屏幕的宽度进行自适应缩放，以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值