【微信小程序】wxss样式

rpx

rpx(responsive pixel)是wxss新引进的尺寸单位。
在宽度为375物理像素的屏幕下，1rpx=1px；
iphone6的屏幕宽度是750物理像素，375px，此时1rpx = 0.5px。

<!-- index.wxml -->
<view>hello world</view>

/* index.wxss */
page{
    display: flex;
    justify-content: center;
    align-items: center;
}
view{
    /* width: 100px;
    height: 100px; */
    width: 100rpx;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightgoldenrodyellow;
}

wxss文件引用

@import url，url是一个字符串，指目标文件所在路径。

<!-- index.wxml -->
<view>
    <text>hello world</text>
</view>

/* test.wxss */
text{
    font-family: Arial,sans-serif;
    font-size: 14px;
}

/* index.wxss */
@import "./test.wxss";
page{
    display: flex;
    justify-content: center;
    align-items: center;
}
view{
    width: 100rpx;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightgoldenrodyellow;
}

内联样式

静态内联样式

<!-- index.wxml -->
<view>
    <text style="font-size:14px;font-family:Arial,sans-serif">hello world</text>
</view>

/* index.wxss */
page{
    display: flex;
    justify-content: center;
    align-items: center;
}
view{
    width: 100rpx;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightgoldenrodyellow;
}

动态内联样式

<!-- index.wxml -->
<view>
    <text style="font-size:{{fontSize}};font-family:{{fontFamily}}">hello world</text>
</view>

/* index.wxss */
page{
    display: flex;
    justify-content: center;
    align-items: center;
}
view{
    width: 100rpx;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightgoldenrodyellow;
}

// index.js
Page({
    data:{
        fontSize:"14px",
        fontFamily:"Arial,sans-serif"
    }
})