wxss 點選樣式 微信小程式前端樣式WXSS書寫

2021-10-13 14:06:47 字數 1433 閱讀 5448

一. wxss的簡單介紹

wxss(weixin style sheets)是一套樣式語言,用於描述 wxml 的元件樣式。

與 css 相比,wxss 擴充套件的特性有:

尺寸單位

樣式匯入

二. 尺寸單位

rpx(responsive pixel): 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iphone6 上,螢幕寬度為375px,共有750個物理畫素,則750rpx = 375px = 750物理畫素,1rpx = 0.5px = 1物理畫素。

裝置rpx換算px (螢幕寬度/750)

px換算rpx (750/螢幕寬度)

iphone5

1rpx = 0.42px

1px = 2.34rpx

iphone6

1rpx = 0.5px

1px = 2rpx

iphone6 plus

1rpx = 0.552px

1px = 1.81rpx

注意: 在較小的螢幕上不可避免的會有一些毛刺,請在開發時盡量避免這種情況。

三. 樣式匯入

使用@import語句可以匯入外聯樣式表,@import後跟需要匯入的外聯樣式表的相對路徑,用;表示語句結束。

示例**:

/** common.wxss **/

.small-p {

padding:5px;

@import "common.wxss";

.middle-p {

padding:15px;

四. 內聯樣式

框架元件上支援使用 style、class 屬性來控制項的樣式。

style:靜態的樣式統一寫到 class 中。style 接收動態的樣式,在執行時會進行解析,請盡量避免將靜態的樣式寫進 style 中,以免影響渲染速度。

class:用於指定樣式規則,其屬性值是樣式規則中類選擇器名(樣式類名)的集合,樣式類名不需要帶上.,樣式類名之間用空格分隔。

五. 選擇器

目前支援的選擇器有:

選擇器樣例

樣例描述

.class

.intro

選擇所有擁有 class="intro" 的元件

#id#firstname

選擇擁有 id="firstname" 的元件

element

view

選擇所有 view 元件

element, element

view, checkbox

選擇所有文件的 view 元件和所有的 checkbox 元件

::after

view::after

在 view 元件後邊插入內容

::before

view::before

在 view 元件前邊插入內容

六. 全域性樣式與區域性樣式

微信小程式 小程式樣式WXSS

wxss weixin style sheets 是 套樣式語 於描述 wxml 的元件樣式。與 css 相 wxss 擴充套件的特性有 1.響應式 度單位 rpx rpx responsive pixel 可以根據螢幕寬度進 適應。規定螢幕寬為 750rpx 如在iphone6 上,螢幕寬度為 3...

微信小程式中的WXSS 樣式

wxss是一套樣式語言,用於描述 wxml 的元件樣式,所以說wxss是用來控制wxml。簡單來說,wxml表示頁面有什麼內容,而wxss表示頁面內容放置位置,尺寸大小,顏色等等。wxss 具有 css 大部分的特性,也就是對頁面的樣式進行控制,當然,wxss 也有一些區別於css的擴充和修改。wx...

1 3 2微信小程式 WXSS

wxss weixin style sheets 是mina框架設計的一套樣式語言,用於描述wxml的元件樣式。wxss用來決定wxml 的元件應該怎麼顯示。與css相比我們擴充套件的特性有 裝置rpx換算px 螢幕寬度 750 px換算rpx 750 螢幕寬度 iphone5 1rpx 0.42p...