微信小程序-- 樣式：rpx的運算；樣式導入；如何使用less文件

rpx ,可以根據屏幕寬度自適應，規定寬度750rpx。如一個手機屏幕寬度是375px, 那750rpx=375px，在這里2rpx=1px

1. rpx及與px的運算

　　微信小程序的rpx樣式單位，微信小程序可以自適應設備的寬度。

　　(標准寬度750rpx= 設備頁面寬度px) 如：設備600px，則 600px = 750rpx ==> 1px = (750 / 600)rpx

微信小程序默認標准寬度：750rpx

例子：

　　設備寬度：600px

　　元素寬度with：200px

　　使用calc（）來計算並使用

　　在wxss中，calc(750rpx / 600 * 200)

 

2. 小程序樣式導入功能

　　微信小程序支持直接使用@import來導入樣式

　　例子：

　　　　1. 在小程序主目錄下新建styles文件夾，其中再新建common.wxss文件，文件中編寫樣式 view { color：yellow；font-size: 30rpx}

　　　　2.導入：在其它wxss中，直接@import “相對路徑”，就可以導入該樣式

 

3. 使用less類型文件

　原生小程序不支持less

　　less是css的補充，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便制作主題、擴充。　　

　　可以通過vscode來在小程序中使用less文件

　　1. 下載並安裝vscode，使用vscode打開小程序項目

　　2. 在vscode中安裝Easy LESS插件

　　3. 在vscode---設置---右上角文件圖標，然后在配置中增加：將less轉為wxss

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

　　4. 在vscode中，在頁面文件中將wxss改為less文件，編輯后保存，可以重新自動創建wxss文件

　　如：

# test.less文件

// 定義less變量
@color: yellow;

// 創建樣式，使用變量
text{
    color: @color;
}
// 嵌套類型的樣式
view{
    .vie1{
        text{
            color:rebeccapurple
        }
    }
}

// 導入其它less文件
@import "../../styles/reset.less";
view{
    color: @view_color
}

 

 　　5. 也可以使用此方法讀取使用現有的less樣式