在小程序中是不需要引入樣式文件,直接再對應的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;
}
文章內容爲視頻零基礎玩轉微信小程序【黑馬程序員】知識點整合