零基礎學習微信小程序(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;
}

文章內容爲視頻零基礎玩轉微信小程序【黑馬程序員】知識點整合

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章