1.尺寸单位
rpx(respective pixel):小程序独有的尺寸单位,规定屏幕宽为750rpx。
可根据屏幕自适应大小。
比如,当屏幕宽度为 375px (像素),则 750rpx = 375px = 750物理像素 , 1rpx = 0.5px
2.数据类型
WXS 语言目前共有以下几种数据类型:
number | 数值 |
string | 字符串 |
boolean | 布尔值 |
object | 对象 |
function | 函数 |
rray | 数组 |
date | 日期 |
regexp | 正则 |
3.样式
小程序中,不需要主动引入样式文件
当单位为像素,改变手机的大小,样式大小不会变化,不会自适应改变大小
view{
width: 200px;
height: 200px;
font-size: 40px;//字体大小
background-color: aqua;//背景颜色
}
想要让样式自适应手机屏幕大小,需要把单位改为rpx
4.样式导入
wxss中支持样式导⼊
也可以和 less中的导⼊混⽤。
使⽤ @import 语句可以导⼊样式,但⽀持相对路径。
新建一个样式文件styles/common.wxss
添加样式:
view{
color: aqua;
font-size: 100px;
}
然后在想要使用这个样式的页面的wxss中导入样式文件
@import "../../styles/common.wxss"//必须是相对路径
此时,view的标签内容样式发生改变
5.选择器
在小程序中,通配符*失效,其他和css一样
部分样式用法如下:
wxss
.first{
color: aquamarine;
font-size: 50px;
}
#second{
color: red;
font-size: 20px;
}
view{
color: aqua;
font-size: 100px;
}
text,checkbox{
color: black;
font-size: 66px;
}
wxml
<view>11</view>
<view class="first">11</view>
<view id="second">11</view>
<text>11</text>