1、尺寸单位
在小程序中,不需要主动引入样式文件
在小程序中使用 rpx单位或者是百分比
属性calc属性,css和wxss都是支持的
注意 :
750和rpx中间也不要留空格
运算符的两边也不要留有空格
view{
/* width: 200rpx; */
height: 200rpx;
font-size: 40rpx;
background-color: aqua;
width: calc(750rpx*100/375);
}
2、样式导入 使用@import来引入 路径只能写相对路径
@import "../../stylexs/common.wxss"
3、选择器
小程序的选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素
4、小程序中使用less
1、小程序支持 less :Easy LESS插件
image.png
image.png
{ // 让小程序支持less 必须配置的
"less.compile": {
"outExt": ".wxss"
}
,
新配置的时候 阅读很好的
"files.associations": {
"*.wxml":"html",
"*.wxss":"css"
}
}
2、直接帮我生成一个wxss文件
定义一个less变量 使用变量
// 直接帮我生成一个wxss文件
// 定义一个less变量
@color:yellow;
text{
// 使用变量
color: @color;
}
view{
.view1{
color: red
}
}
// 导入 解决方案:少了 ; 少了 ;号呀
@import "../../stylexs/reset.less";
// 这个是真的牛逼
view{
color:@themeColor;
}