微信小程序WXSS样式

WXSS是微信小程序专用的样式语言,用来描述WXML的组件样式。它和CSS类似,但针对小程序的场景做了扩展。WXSS主要体现在这几方面:

  • 尺寸单位rpx
  • 样式导入
  • 内联动态样式
  • 全局和局部样式

尺寸单位

WXSS引入了新的尺寸单位rpx(responsive pixel),规定所有屏幕的宽度固定为750rpx。如果直接在WXSS使用px,由于屏幕的分辨率不同就会导致px定义的元素显示不一样。使用响应单位rpx在所有屏幕上显示的比例是一样的。

如在 iPhone6 上,屏幕宽度为375px,则750rpx = 375px,1rpx = 0.5px 。

rpx与px的转换如下:

  • iPhone5: 1rpx = 0.42px,1px = 2.34rpx
  • iPhone6: 1rpx = 0.5px,1px = 2rpx
  • iPhone6 Plus: 1rpx = 0.552px,1px = 1.81rpx

微信小程序是推荐设计实用用iPhone 6作为视觉效果。

样式导入

使用@import语句导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

示例代码:

/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}

内联动态样式

微信小程序建议在内联样式style上定义动态的样式,它会在运行时解析,如下:

<view style="color:{{color}};" />

对于静态样式建议定义在样式表里的class

全局和局部样式

在微信小程序里根据样式的作用范围,可以把样式分为:

  • 公共样式(app.wxss):公共样式作用域全局,对所有的页面都起效。
  • 页面局部样式:与app.json注册过的页面同名且位置同级的WXSS文件。wxss里定义的样式作用于此页面。
  • 其他样式:其他样式使用@import导入

版权声明:著作权归作者所有。

相关推荐

CSS设置placeholder字体样式

CSS标准里是没有直接对placeholder设置样式的选择器,这里主要是通过各个浏览器的兼容前缀来给输入框的placeholder设置字体样式。/* WebKit browsers*/  input::-webkit-input-placeholder {    color:#999;     font-s

微信小程序页面跳转的几种方法

本文总结了微信小程序页面跳转分为这几种类型:navigate:跳转页面,并保留当前页面。前一个页面可以使用navigateBack类型的跳转退回。redirect:关闭当前页面,然后跳转到新页面。switchTab:跳转到tabBar页面(在app.json中注册过的tabBar页面),同时关闭其他非tabBar页面。navigateBack:页面退回。微信原生提供的APInavigateTowx

[译]Android UI设计与样式——dp和sp

朋友们,最近我一直在做一些Android UI设计和样式的培训课程。 我想和更多观众分享。 这是我的第一个android ui设计和样式教程。 我将在这个主题上写更多的内容。 那么现在开始吧...DP, SP & Pixels作为Android开发人员,我们始终希望我们的UI设计与设备无关。