小程序样式

app.wxss是全局样式，作用于每一个页面

其它的wxss文件只作用于当前页面, 并可对app.wxss样式进行覆盖

微信小程序wxss样式大部分都和css样式一致, 目前只支持:

.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

导入外部样式: (css是@import url("...")导入)

@import "xxx.wxss"; 而小程序中, 它只能导入.wxss文件, 不能导入.css文件

创建other.wxss文件:

.aa {
  background:red;
  width: 375rpx;
}

 引用other.wxss文件

/**index.wxss**/
@import "../common/other.wxss";

.tx {
  background:green;
  width: 400rpx;
}

注意路径问题: 相对和绝对都是可以的(相对可能要好点)

@import "../common/other.wxss";  要放头部才有效

引用的样式与自身的.wxss文件的样式都可以使用

<view>
  <view class='aa'>aa</view>
</view>
<view>
  <view class='tx'>tx</view>
</view>

当然还有内联样式也可以使用(在标签中加入style属性, 里面写上样式)

优先级也是范围越小优先级越高(内联>.wxss文件>全局)

 

尺寸单位

小程序中可使用rpx和rem来做响应布局

传统的像素单位px是固定的大小, 在屏幕变化时它是固定大小, 不变化的

rpx将屏幕分为750个单位, 即任意大小的屏幕都是750rpx (rem是20个单位), 主要是使用rpx