在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。 其中:注意全局样式和局部样式 定义在 app.wxss 中的样式为全局样式,作用于每一个页面。 定义在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。 WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。 与 CSS 相比,WXSS 扩展的特性有:尺寸单位和样式导入 一、尺寸单位 只需要将原来的单位ps 换成 rpx 后,小程序就会调整后页面内元素也会自动进行调整,注意默认规定屏幕宽度为 750px /* 1、小程序中,不需要主动来引入样式文件 2、使用rpx 后,小程序会自动根据页面宽度进行调整,公式如下 调整后元素大小 = 调整前元素大小*调整后屏幕大小/调整前屏幕大小(默认规定为750px) 如:原来的屏幕宽度为 750px,页面内元素宽是200rpx 将屏幕宽度变成 375px,后页面内元素宽变成了 100px */ /*标签选择器*/ view{ width: 200rpx; height: 200rpx; font-size: 40rpx; background-color: darkkhaki; } <!--pages/yangshiStu/yangshiStu.wxml--> <view> rpxstu </view> 二、样式导入 在样式 pages/yangshiStu/yangshiStu.wxss 中引入根目录下style/common.wxss 的text样式,将pages/yangshiStu/yangshiStu.wxml 中使用text 标签框柱的样式进行渲染 引入外部样式
1、借助关键字 @import 来引入
2、只支持相对路径,用
; 表示语句结束如:
@import "../../style/common.wxss";
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
|
请发表评论