03 小程序语法-WXSS样式-尺寸-样式 -选择器

1 样式

微信的wxss(weixin style sheets)是一套样式语言,用于描述wxml的组件样式

与CSS相比,wxss扩展的特性有:

  •      响应式长度单位rpx
  •      样式导入


1.1.尺寸单位-rpx小程序独有

      rpx(responsive pixel)可以根据屏幕宽度进行自适应,小程序中规定屏幕宽为750rpx,如在iphone6上,屏幕宽度为375rpx ,共有750物理像素,则 750rpx=375px=750物理像素 

1rpx=0.5px=1物理像素:

03 小程序语法-WXSS样式-尺寸-样式 -选择器

以px为例

03 小程序语法-WXSS样式-尺寸-样式 -选择器

转为rpx后:

1.小程序中不需要主动来引入样式文件,也就是不需要写link,只需要pages文件夹下面名字一样即可

2.要实现需求,得把页面某些元素单位由px转为rpx

    750px=750rpx

    当我们把750rpx页面转为375rpx后

    375px=750rpx

    1px=2rpx 也就大小也就变了

*/

view{

width: 100rpx;

height: 100rpx;

font-size: 40rpx;

background-color: aqua;

}

03 小程序语法-WXSS样式-尺寸-样式 -选择器




1.2 样式导入



1.3 选择器


1.4小程序中使用css预处理器-jess







03 小程序语法-WXSS样式-尺寸-样式 -选择器

上一篇:小程序跨页面交互的作用与方法


下一篇:小程序商城Mall,打造最佳SpringCloudAlibaba最佳实践