公共样式
原创...大约 2 分钟
在项目根目录的 app.wxss 文件为小程序公的共样式表,相当与 CSS 初始化文件配置
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式
WXSS 用来决定 WXML 的组件应该怎么显示
为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比,WXSS 扩展的特性有
尺寸单位
样式导入
公共样式
在 app.wxss
文件中添加样式
text {
color: red;
}
项目中所有的页面的 text
文本都会呈现红色
尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上,屏幕宽度为 375px,共有 750 个物理像素,则 750rpx = 375px = 750 物理像素,1rpx = 0.5px = 1 物理像素
设备 | rpx 换算 px (屏幕宽度/750) | px 换算 rpx (750/屏幕宽度) |
---|---|---|
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
提示
建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况
<view class="box"></view>
.box {
width: 200rpx;
height: 200rpx;
background: red;
}
在 iphone5 上的效果,元素的宽高是 85px
在 iphone6 上的效果,元素的宽高是 100px
样式导入
使用@import
语句可以导入外联样式表,@import
后跟需要导入的外联样式表的相对路径,用;表示语句结束
在项目根目录下创建common
文件夹,并创建common.wxss
文件,增加box
的样式
.box {
margin: 50px;
}
在app.wxss
文件中引入common.wxss
文件
@import "./common/common.wxss";
Powered by Waline v2.15.7