原生小程序--初始化页面样式--（屏幕适配rpx）

在styles/新建flex.wxss文件
flex.wxss文件添加到app.wxss文件中，对自定义组件样式没有效果
解决方法：将flex.wxss文件添加到自定义组件的样式文件中：

@import "../../styles/flex.wxss";

.u-f,
.u-f-ac,
.u-f-ajc {
	display: flex;
}
.u-f-ac,
.u-f-ajc {
	align-items: center;
}
.u-f-ajc {
	justify-content: center;
}
.u-f-jsb {
	justify-content: space-between;
}

app.wxss页面中

/* 引入外部文件 */
@import "./styles/iconfont.wxss";
@import "./styles/flex.wxss";

page,
view,
text,
swiper,
swiper-item,
image,
navigator {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* 
主题颜色通过变量来实现
1. less中存在变量这个知识；原生的css和wxss也是支持变量
2. 在页面的样式文件wxss文件中，使用方法： color: var(--themeColor);
*/
page {
    /* 定义主题颜色 */
    --themeColor: #eb4450;
    
     /* 
    定义统一字体大小：假设设计稿：375px 、假设对应的根字体设置为 14px
    	1px = 2rpx ; 14px = 28rpx
    */
    font-size: 28rpx;
}

image {
    width: 100%;
}