微信小程序wxss设置样式

最新推荐文章于 2024-07-26 13:09:24 发布

蜘蛛游泳池

最新推荐文章于 2024-07-26 13:09:24 发布

阅读量366

点赞数

本文链接：https://blog.csdn.net/weixin_42607627/article/details/102525875

版权

本文主要介绍了微信小程序中wxml的界面结构和wxss的样式设置。wxml由八大类基础组件构成，wxss则用于决定组件的显示效果，并在CSS基础上扩展了尺寸单位rpx和样式导入功能。通过rpx实现屏幕自适应，wxss可以导入外部样式表并分为全局和局部样式。局部样式可以覆盖全局样式中的相同属性。

摘要由CSDN通过智能技术生成

对于以前搞客户端开发的来说，有着客户端的逻辑，就是不知道怎么设置样式，把对应的控件显示出来

一、wxml

界面结构wxmL比较容易理解，主要是由八大类基础组件构成：

关于这八大类的属性和具体用法可参考以下参考文献链接：

二、wxss

wxml理解起来容易，但光搭好了框架，并不能达到我们想要的界面效果，这就需要用到wxss样式了。

wxss样式决定了组件应该如何显示，并在css的基础上做了一些功能扩展，主要包括：

1.尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。

rpx 与 px单位换算如下：