【行业认证·权威头衔】✔ 华为云天团核心成员特约编辑/云享专家/开发者专家/产品云测专家✔ 开发者社区全满贯CSDN博客商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金亚马逊51CTO顶级博主✔ 技术生态共建先锋横跨鸿蒙、云计算、AI等前沿领域的技术布道者【荣誉殿堂】 连续三年蝉联华为云十佳博主2022-2024 双冠加冕CSDN年度博客之星TOP220222023 十余个技术社区年度杰出贡献奖得主【知识宝库】覆盖全栈技术矩阵◾ 编程语言.NET/Java/Python/Go/Node…◾ 移动生态HarmonyOS/iOS/Android/小程序◾ 前沿领域物联网/网络安全/大数据/AI/元宇宙◾ 游戏开发Unity3D引擎深度解析文章目录微信小程序样式渲染1 尺寸单位表 2.1 rpx 与 px 的换算关系2 样式导入3 内联样式1. style2. class4 选择器表 2.2 支持的选择器5 常用样式的属性1. display 样式☀️表 2.3 display 样式的属性、说明及示例2. position 样式☀️表 2.4 position 样式的属性、说明及示例3. float 样式☀️表 2.5 float 样式的属性、说明及示例4. background 样式☀️表 2.6 background 样式的属性、说明及示例5. border 样式☀️表 2.7 border 样式的属性、说明及示例6. outline 样式☀️表 2.8 outline 样式的属性、说明及示例7. text 样式☀️表 2.9 text 样式的属性、说明及示例8. font 样式☀️表 2.10 font 样式的属性、说明及示例9. margin 样式☀️表 2.11 margin 样式的属性、说明及示例10. padding 样式☀️表 2.12 padding 样式的属性、说明及示例补充WXSS 与 CSS 的区别 注意事项附AI 提示词模板与完整回答示例模板 1让 AI 解释 WXSS 与 CSS 的区别一、WXSS 的作用二、对比表三、完整示例四、注意事项模板 2让 AI 生成响应式页面样式模板 3让 AI 修复 WXSS 样式问题微信小程序样式渲染WXSS 是样式语言用于描述 WXML 组件的样式。WXSS 具有 CSS 的大部分特性并且对 CSS 进行了扩充及修改用于设置 WXML 组件的显示效果。与 CSS 相比WXSS 在尺寸单位和样式导入方面进行了扩展。1 尺寸单位WXSS 的尺寸单位是 rpxResponsive Pixel响应像素它可以根据屏幕宽度进行自适应。屏幕宽度规定为 750rpx。例如iPhone 6 的屏幕宽度为 375px共有 750 个物理像素则 750rpx 375px 750 个物理像素1rpx 0.5px 1 个物理像素。rpx 与 px 的换算关系如表 2.1 所示。表 2.1 rpx 与 px 的换算关系设备rpx 换算成 px屏幕宽度 / 750px 换算成 rpx750 / 屏幕宽度iPhone 51rpx 0.42px1px 2.34rpxiPhone 61rpx 0.5px1px 2rpx华为 P401rpx 0.46px1px 2.17rpx补充说明rpx 是响应式单位能根据屏幕宽度自动缩放。设计稿通常以 750px 宽度为基准标注的尺寸可直接用 rpx 使用。在 iPhone 6 上1rpx 0.5px即 750rpx 375px。在 iPhone 6 Plus 上屏幕宽度为 414px1rpx ≈ 0.552px。建议在布局中优先使用 rpx字体也可以使用 rpx。对于不需要缩放的场景可以使用 px。示例.container{width:750rpx;height:200rpx;font-size:32rpx;}2 样式导入使用import语句可以导入外联样式表import后跟需要导入的外联样式表的相对路径用;表示语句结束。示例代码如下common.wxss/** common.wxss **/.small-p{padding:5px;}app.wxss/** app.wxss **/importcommon.wxss;.middle-p{padding:15px;}这样在app.wxss文件里可以将common.wxss文件样式导入使用。补充说明定义在app.wxss文件中的样式为全局样式作用于每个页面。在每个页面的*.wxss文件中定义的样式为局部样式只作用于对应的页面并会覆盖app.wxss文件中相同的选择器。import后跟相对路径路径相对于当前文件。import可以导入其他.wxss文件但不支持导入.css文件。import语句末尾必须有分号。3 内联样式在 WXML 视图组件中可以使用style、class属性来控制组件的样式。1. stylestyle用于接收动态的样式在运行时会进行解析。静态的样式统一写到class属性中要尽量避免将静态的样式写进style属性中以免影响渲染速度。style属性示例代码如下!-- 动态获取样式 --viewstylecolor:{{color}}/!-- 静态的样式写进 style 属性尽量避免使用 --viewstylecolor:red;/2. classclass用于指定样式规则其属性值是样式规则中样式类名的集合。样式类名不需要带上“.”多个样式类名之间用空格分隔。示例代码如下viewclassnormal_view highlighted/补充说明style适合动态样式例如根据数据改变颜色、宽度等。class适合静态样式便于复用和维护。不要在style中写大量静态样式会影响渲染性能。class可以同时指定多个类名用空格分隔。WXSS 支持的选择器有限建议主要使用class选择器。4 选择器WXSS 样式渲染支持用选择器来控制其支持的选择器如表 2.2 所示。表 2.2 支持的选择器选择器样例样例描述class.intro选择所有拥有classintro的组件id#firstname选择拥有idfirstname的组件elementview选择所有view组件element, elementview, checkbox选择所有文档的view组件和checkbox组件::afterview::after在view组件后插入内容::beforeview::before在view组件前插入内容补充说明WXSS 不支持*通配符选择器。WXSS 不支持属性选择器和部分伪类选择器。建议优先使用class选择器避免使用id选择器。::after和::before必须配合content属性使用。页面样式默认只作用于当前页面。5 常用样式的属性常用样式包括display显示、position定位、float浮动、background背景、border边框、outline轮廓、text文本、font字体、margin外边距、padding填充等。1. display 样式display样式的属性、说明及示例如表 2.3 所示。☀️表 2.3 display 样式的属性、说明及示例属性说明示例flex多栏多列布局常和flex-direction:row/column一起使用display:flex;inline-block行内块元素display:inline-block;inline显示为内联元素元素前后没有换行符display:inline;inline-table作为内联表格显示类似于table表格前后没有换行符display:inline-table;inline-flex作为内联块级弹性伸缩盒显示display:inline-flex;none不会显示display:none;block显示为块级元素此元素前后会带有换行符display:block;list-item作为列表显示display:list-item;table作为块级表格显示类似于table表格前后带有换行符display:table;table-caption作为一个表格标题显示类似于captiondisplay:table-caption;table-cell作为一个表格单元格显示类似于td和thdisplay:table-cell;table-column作为一个表格列显示类似于coldisplay:table-column;table-column-group作为一个或多个列的分组来显示类似于colgroupdisplay:table-column-group;table-row作为一个表格行显示类似于trdisplay:table-row;table-row-group作为一个或多个行的分组显示通常用于表格主体部分类似于tbodydisplay:table-row-group;table-header-group作为一个或多个行的分组显示通常用于表格的表头部分类似于theaddisplay:table-header-group;table-footer-group作为一个或多个行的分组显示通常用于表格的表尾部分类似于tfootdisplay:table-footer-group;inherit从父元素继承display属性的值display:inherit;2. position 样式position样式的属性、说明及示例如表 2.4 所示。☀️表 2.4 position 样式的属性、说明及示例属性说明示例absolute生成绝对定位的元素相对于static定位以外的第一个父元素进行定位。元素的位置通过left、top、right及bottom属性进行设定position:absolute;relative生成相对定位的元素相对于其正常位置进行定位。例如left:20表示向元素的left位置移动 20px。元素的位置通过left、top、right及bottom属性进行设定position:relative;fixed生成绝对定位的元素相对于浏览器窗口进行定位。元素的位置通过left、top、right及bottom属性进行设定position:fixed;static默认值没有定位元素出现在正常的流中忽略top、bottom、left、right或者z-index声明position:static;inline-flex作为内联块级弹性伸缩盒显示position:inline-flex;inherit设定从父元素继承position属性的值position:inherit;3. float 样式float样式的属性、说明及示例如表 2.5 所示。☀️表 2.5 float 样式的属性、说明及示例属性说明示例left元素向左浮动float:left;right元素向右浮动float:right;none默认值元素不浮动并会显示其在文本中出现的位置float:none;inherit规定从父元素继承float属性的值float:inherit;4. background 样式background样式的属性、说明及示例如表 2.6 所示。☀️表 2.6 background 样式的属性、说明及示例属性说明示例background简写属性作用是将背景属性设置在一个声明中background:#ff0000 center no-repeat padding-box border-box fixed url(bg.jpg);background-color指定背景色background-color:#ff0000;background-position指定背景图像的位置background-position:center;background-size指定背景图像的大小background-size:80px 60px;background-repeat指定如何重复背景图像background-repeat:no-repeat;background-origin指定背景图像的定位区域即背景图像填充框的相对位置background-origin:padding-box;background-clip指定背景图像的区域background-clip:border-box;background-attachment设置背景图像是否固定或随页面的其余部分滚动background-attachment:fixed;background-image指定要使用的一幅或多幅背景图像使用url(URL)提供图像的 URLUniform Resource Locator统一资源定位符background-image:url(image.jpg);5. border 样式border样式的属性、说明及示例如表 2.7 所示。☀️表 2.7 border 样式的属性、说明及示例属性说明示例border简写属性用于把边框的属性设置在一个声明中border:5px solid red;border-width为元素的所有边框设置宽度或者单独地为各边框设置宽度border-width:3px;border-width:1px 2px 3px 4px;上右下左border-style设置元素所有边框的样式或者单独地为各边设置边框样式border-style:solid;border-style:dotted dashed;上下 / 左右border-color设置元素所有边框中可见部分的颜色或者为 4 条边分别设置颜色border-color:red;border-color:red green blue yellow;6. outline 样式outline样式的属性、说明及示例如表 2.8 所示。☀️表 2.8 outline 样式的属性、说明及示例属性说明示例outline在一个声明中设置所有的外边框属性outline:2px dashed #ff0000;outline-color设置外边框的颜色outline-color:#333;outline-style设置外边框的样式outline-style:solid;outline-style:dotted;outline-width设置外边框的宽度outline-width:3px;outline-width:medium;7. text 样式text样式的属性、说明及示例如表 2.9 所示。☀️表 2.9 text 样式的属性、说明及示例属性说明示例color设置文本颜色color:red;direction设置文本方向direction:ltr;从左到右direction:rtl;从右到左letter-spacing设置字符间距letter-spacing:2px;line-height设置行高line-height:1.5;line-height:20px;text-align对齐元素中的文本text-align:left;左对齐text-align:center;居中对齐text-align:right;右对齐text-align:justify;两端对齐text-decoration向文本添加修饰text-decoration:underline;下划线text-decoration:line-through;删除线text-decoration:overline;上划线text-indent缩进元素中文本的首行text-indent:2em;text-indent:20px;text-shadow设置文本阴影text-shadow:2px 2px 4px #000;text-shadow:1px 1px 2px rgba(0,0,0,0.5);text-transform控制元素中的字母text-transform:uppercase;全大写text-transform:lowercase;全小写text-transform:capitalize;首字母大写vertical-align设置元素的垂直对齐vertical-align:middle;vertical-align:top;vertical-align:sub;下标white-space设置元素中空白的处理方式white-space:nowrap;不换行white-space:pre;保留空格和换行white-space:pre-wrap;保留空格允许换行word-spacing设置字间距word-spacing:4px;word-spacing:normal;8. font 样式font样式的属性、说明及示例如表 2.10 所示。☀️表 2.10 font 样式的属性、说明及示例属性说明示例font在一个声明中设置所有字体属性font:italic small-caps bold 16px/1.5 Arial;font-style指定文本的字体样式font-style:normal;font-style:italic;font-style:oblique;font-variant以小型大写字母字体或者正常字体显示文本font-variant:normal;font-variant:small-caps;font-weight指定字体的粗细font-weight:normal;font-weight:bold;font-weight:bolder;font-weight:lighter;font-size指定文本的字体大小font-size:16px;font-family指定文本的字体系列font-family:Arial, sans-serif;font-family:Times New Roman, serif;9. margin 样式margin样式的属性、说明及示例如表 2.11 所示。☀️表 2.11 margin 样式的属性、说明及示例属性说明示例margin在一个声明中设置所有外边距属性margin:10px 5px 15px 20px;上边距、右边距、下边距、左边距margin-top设置元素的上外边距margin-top:20px;margin-right设置元素的右外边距margin-right:15px;margin-bottom设置元素的下外边距margin-bottom:10px;margin-left设置元素的左外边距margin-left:5px;10. padding 样式padding样式的属性、说明及示例如表 2.12 所示。☀️表 2.12 padding 样式的属性、说明及示例属性说明示例padding使用缩写属性设置在一个声明中的所有填充属性padding:10px 5px 15px 20px;顶部填充、右部填充、底部填充、左部填充padding-top设置元素的顶部填充padding-top:20px;padding-right设置元素的右部填充padding-right:15px;padding-bottom设置元素的底部填充padding-bottom:10px;padding-left设置元素的左部填充padding-left:5px;补充WXSS 与 CSS 的区别对比项CSSWXSS尺寸单位px、em、rem 等新增 rpx响应式单位样式导入importimport支持相对路径选择器支持多种选择器支持有限选择器作用域全局页面样式默认局部作用域全局样式无app.wxss 为全局样式局部样式无页面 wxss 为局部样式覆盖全局同名选择器通配符支持 *不支持 *属性选择器支持不支持说明WXSS 兼容大部分 CSS 特性。WXSS 新增了 rpx 尺寸单位适合多屏幕适配。WXSS 支持 import 导入外联样式。WXSS 选择器支持有限建议主要使用 class 选择器。页面样式默认只作用于当前页面避免样式冲突。 注意事项优先使用 rpx 进行布局字体也可以使用 rpx。静态样式写在 class 中动态样式写在 style 中。避免在 style 中写大量静态样式影响渲染速度。import 语句末尾必须有分号。页面样式会覆盖 app.wxss 中相同的选择器。WXSS 不支持 * 通配符选择器。布尔值属性必须使用 {{}} 绑定。使用 AI 生成 WXSS 代码后需要人工检查选择器、单位和兼容性。附AI 提示词模板与完整回答示例原文未包含 AI 提示词模板和回答。以下为便于学习和开发补充的完整模板与完整回答可直接复制使用。模板 1让 AI 解释 WXSS 与 CSS 的区别提示词模板请详细解释微信小程序 WXSS 与 CSS 的区别。 要求 1. 说明 WXSS 的作用 2. 对比尺寸单位、样式导入、选择器、作用域、全局样式与局部样式 3. 给出完整 WXSS 示例代码 4. 说明注意事项。 请用表格和分级标题输出内容完整。完整回答示例WXSS 与 CSS 的区别一、WXSS 的作用WXSS 是微信小程序的样式语言用于描述 WXML 组件的样式。它兼容大部分 CSS 特性并进行了扩展。二、对比表对比项CSSWXSS尺寸单位px、em、rem新增 rpx样式导入importimport选择器支持多种支持有限作用域全局页面局部全局样式无app.wxss局部样式无页面 wxss通配符支持 *不支持属性选择器支持不支持三、完整示例app.wxssimportcommon.wxss;.container{padding:30rpx;}index.wxss.title{font-size:36rpx;color:#FFA500;text-align:center;}.btn{width:200rpx;height:80rpx;line-height:80rpx;background-color:#FFA500;border-radius:10rpx;}index.wxmlviewclasscontainerviewclasstitle莫凡商城/viewviewclassbtn立即购买/view/view四、注意事项优先使用 rpx。静态样式写 class动态样式写 style。页面样式会覆盖全局同名选择器。不支持 * 通配符。建议使用 class 选择器。模板 2让 AI 生成响应式页面样式提示词模板请使用微信小程序 WXSS生成一个响应式商品列表页面样式。 要求 1. 使用 rpx 单位 2. 包含商品卡片、图片、标题、价格、按钮 3. 使用 flex 布局 4. 适配不同屏幕宽度 5. 给出完整 WXML 和 WXSS 代码并解释关键逻辑。完整回答示例index.wxmlviewclasspageviewclassgoods-listviewclassgoods-itemwx:for{{goods}}wx:keyidimageclassgoods-imgsrc{{item.cover}}modeaspectFill/imageviewclassgoods-infotextclassgoods-name{{item.name}}/texttextclassgoods-price{{item.price}}/text/viewbuttonclassgoods-btnsizemini加入购物车/button/view/view/viewindex.wxss.page{min-height:100vh;background:#f5f5f5;padding:20rpx;}.goods-list{display:flex;flex-direction:column;gap:20rpx;}.goods-item{display:flex;align-items:center;padding:20rpx;background:#fff;border-radius:10rpx;}.goods-img{width:160rpx;height:200rpx;border-radius:8rpx;background:#eee;}.goods-info{flex:1;margin-left:20rpx;display:flex;flex-direction:column;}.goods-name{font-size:30rpx;font-weight:bold;color:#333;}.goods-price{margin-top:20rpx;font-size:32rpx;color:#e54d42;}.goods-btn{width:180rpx;height:60rpx;line-height:60rpx;font-size:26rpx;background-color:#FFA500;color:#fff;border-radius:30rpx;}关键逻辑说明使用 rpx 单位适配不同屏幕宽度。使用 flex 布局商品卡片横向排列。图片使用固定宽高避免布局抖动。价格使用红色突出显示。按钮使用橙色与主题一致。使用 gap 控制列表间距。模板 3让 AI 修复 WXSS 样式问题提示词模板我在微信小程序 WXSS 中遇到以下问题 【粘贴问题描述】 相关代码 【粘贴 WXML 和 WXSS 代码】 请帮我定位原因给出修改后的完整代码并解释修改点。完整回答示例假设问题页面在 iPhone 5 上样式错乱使用了 px 单位导致不兼容。相关代码.container{width:375px;font-size:16px;}原因使用 px 单位在不同屏幕上不会自适应。修改后的完整代码.container{width:750rpx;font-size:32rpx;}修改点说明375px改为750rpx实现响应式布局。16px改为32rpx字体也能自适应。rpx 会根据屏幕宽度自动缩放。建议在布局中优先使用 rpx。