转载-微信小程序-wxss

wxss

wxss(weixin style sheets) 是
一套样式语言,用于描述wxml的组件样式
决定wxml的组件应该怎么显示

一 尺寸单位

rpx(responsive pixel):可以根据屏幕宽度进行自适应

rem(root em):规定屏幕宽度为20rem
尺寸单位.png
建议:
开发时候,设计师可以用iphone6作为视觉稿的标准
在较小的屏幕上,不可避免会有一些毛刺,尽量避免

二 样式导入

使用@import语句可以导入外联样式表
@import后跟需要导入的外联样式表的相对路径

样式导入.png

三 内联样式

框架组件上支持使用style,class属性来控制组件的样式
style:静态的样式统一写到class中
style接收动态的样式,运行时候进行解析
避免将静态的样式写进style中,避免影响渲染速度
class:用于指定样式规则,
属性值是样式规则中类选择器的集合
样式类名不需要带上.
样式类名之间空格分隔

四 选择器

选择器.png

五 全局样式和局部样式

定义在app.wxss中的是全局样式
定义在page的wxss中为局部样式
局部样式只能作用在对应的页面,
会覆盖全局样式中相同的选择器
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容