微信小程序开发|样式文件wxss

WXSS具有CSS的大部分功能，小程序也在WXSS中进行了扩展和修改。

添加了尺寸单位。在编写CSS样式时，开发人员需要考虑到移动设备的屏幕具有不同的宽度和设备像素比，并使用一些技术来转换一些像素单位。WXSS在底层支持一个新的维度单位rpx。开发人员可以避免转换的麻烦。他们只需要将其交给小程序的底层进行转换。由于转换中使用了浮点运算，因此运算结果将与预期结果略有偏差。

提供全局和局部样式。还有上一个应用json，第页。json的概念是一样的。您可以编写一个app作为全局样式，wxss将应用于当前小程序的所有页面。本地页面样式为页面Wxs仅对当前页面有效。

此外，WXSS只支持一些CSS选择器

有关更多详细文档，请参阅WXSS。

官方文档包括样式导入、内联样式和选择器。微信开发者需要仔细研究一下。

自适应尺寸单位rpx

Rpx（反应像素）：根据屏幕宽度自适应。指定的屏幕宽度为750rpx。例如，在iPhone 6上，如果屏幕宽度为375px，并且有750个物理像素，那么750rpx=375px=750个物理象素，1rpx=0.5px=1个物理像素。

Rpx，微信定制的单元，在实际应用中非常容易使用，因为你可以忽略不同的手机型号。有时，当宽度为100%时，您可以直接订购750 rpx。

内联样式的动态转换

静态样式已写入。有时候有些场景想要根据不同的场景设置不同的样式。这样，可以在wxml中定义变量，并在js中设置不同的样式。这在工作场景中非常实用。

<查看/>

伪选择器

当您第一次接触样式时，很容易忽略样式的伪元素，但它们可以很容易地使用。例如：：after，：before

以两个场景为例：1.在视图后面放一个箭头

形象

使用：：之后

.箭头：：后面{

这里有一个垂直居中的提示：顶部：50%，然后从边距顶部减去高度的一半，这里是-3px；

2.在某些文本前面竖排

形象

使用：：之前

.sessionHeader:之前{

巧智科技：科技成就梦想！专注于广州、深圳和惠州的小程序、APPapp、网站和区块链钱包的定制开发！