零基础学习微信小程序(6):wxss

在小程序中是不需要引入样式文件,直接再对应的wxss里写样式就可以了
小技巧:
安装插件(以后会用到)
在这里插入图片描述
在小程序中使用less之前需要进行配置:
先点击左小角的齿轮图标,点击设置,再点击右上角的打开设置
,接着就会打开一个文件,在文件里面输入以下代码:

 "less.compile":{
        "outExt": ".wxss"
    }

这样就配置成功了。

在less里写代码的时候,会自动生成wxss代码;并且在less中写嵌套的样式设置更加的方便
在显示wxss文件的时候,点击VS Code右下方,选中less,即可以使wxss文件里的代码有高亮和代码提示
在这里插入图片描述

尺寸单位:

小程序的尺寸是用rpx表示,使用rpx单位的话,就可以根据屏幕的宽度自适应的调整。1rpx=0.5px=1像素
以下的情况会使得view标签再每一个设备上的大小属性是固定的,影响页面的观赏性:

view{
    width:200px;
    height:200px;
    font-size:40px;
    background-color:aqua;
}

将以上的代码按照比例进行修改:

/* pages/demo05/demo05.wxss */
view{
    width:200rpx;
    height:200rpx;
    font-size:40rpx;
    background-color:aqua;
}

此时的就可以根据屏幕的大小进行修改
在这里插入图片描述

导入wxss:

在一个wxss文件里面可以导入另一个wxss文件
语法:
@import 路径(路径为相对路径);
在这里插入图片描述

选择器:

小程序里是不支持通配符的,即不支持

*{
	margin:0;
}

文章内容为视频零基础玩转微信小程序【黑马程序员】知识点整合

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值