微信小程式WXSS 尺寸單位、樣式匯入、內聯樣式、選擇器、全域性樣式與區域性樣式
WXSS(WeiXin Style Sheets)是一套樣式語言,用於描述 WXML 的元件樣式。
WXSS 用來決定 WXML 的元件應該怎麼顯示。
為了適應廣大的前端開發者,我們的 WXSS 具有 CSS 大部分特性。 同時為了更適合開發微信小程式,我們對 CSS 進行了擴充以及修改。
與 CSS 相比我們擴充套件的特性有:
- 尺寸單位
- 樣式匯入
尺寸單位
- 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
建議: 開發微信小程式時設計師可以用 iPhone6 作為視覺稿的標準。 注意: 在較小的螢幕上不可避免的會有一些毛刺,請在開發時儘量避免這種情況。
樣式匯入
使用@import語句可以匯入外聯樣式表,@import後跟需要匯入的外聯樣式表的相對路徑,用;表示語句結束。
示例程式碼:
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
內聯樣式
框架元件上支援使用 style、class 屬性來控制組件的樣式。
- style:靜態的樣式統一寫到 class 中。style 接收動態的樣式,在執行時會進行解析,請儘量避免將靜態的樣式寫進 style
中,以免影響渲染速度。
<view style="color:{{color}};" />
- class:用於指定樣式規則,其屬性值是樣式規則中類選擇器名(樣式類名)的集合,樣式類名不需要帶上.,樣式類名之間用空格分隔。
<view class="normal_view" />
選擇器
目前支援的選擇器有:
選擇器 樣例 樣例描述
.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 元件前邊插入內容
全域性樣式與區域性樣式
定義在 app.wxss 中的樣式為全域性樣式,作用於每一個頁面。在 page 的 wxss 檔案中定義的樣式為區域性樣式,只作用在對應的頁面,並會覆蓋 app.wxss 中相同的選擇器。
相關推薦
微信小程式WXSS 尺寸單位、樣式匯入、內聯樣式、選擇器、全域性樣式與區域性樣式
WXSS(WeiXin Style Sheets)是一套樣式語言,用於描述 WXML 的元件樣式。 WXSS 用來決定 WXML 的元件應該怎麼顯示。 為了適應廣大的前端開發者,我們的 WXSS 具有 CSS 大部分特性。 同時為了更適合開發微信小程式,我們
微信小程式 WXSS
WXSS WXSS(WeiXin Style Sheets)是一套樣式語言,用於描述WXML的元件樣式。 WXSS用來決定WXML的元件應該怎麼顯示。 為了適應廣大的前端開發者,我們的WXSS具有CSS大部分特性。同時為了更適合開發微信小程式,我們對CSS進行了擴充以及修改。 與css相
給和我一樣的初學者分享個微信小程式.WXSS使用background引入背景圖的辦法
因為專案的緣故,我最近開始學小程式。初入小程式就遇見了個問題,就是在引入背景圖片的時候會出現,下圖的錯誤: 看了錯誤後才發現,原來微信小程式在引入背景圖時需要將圖片格式轉一下,並不是說是我的路徑出現問題了。為了將圖片格式專成base64。現在給所
微信小程式wxss的background本地圖片問題
在web 或者webapp開發中我們習慣了直接飲用本地圖片做背景,例如 .aaa { background: url('img/1.png'); } 但是這種引用方式在微信小程式中是無法使用的,控制檯會顯示如下 不允許使用本地路徑。 於是我將路徑替換為非本地路徑試試: .
微信小程式---wxss常用屬性
以下內容均為個人理解,主要用於備忘 —–前言即廢話篇——- 微信小程式的程式碼和網頁程式設計非常相似,兩者都有JS、JSON檔案,同時WXML=>HTML,WXSS=>CSS。 附上兩條連結:w3school關於
微信小程式wxss border及border-radius屬性
--------------------border------------------- 一.邊框:border 設定物件邊框的特性。 1.語法:border:length style color 2.style:none ,hidden,dotted,d
微信小程式Ⅷ [WXSS 小知識積累]
♩. 前言 微信小程式,作為一個前端為主的語言,涉及到的頁面佈局自然跟 HTML、CSS 有很大的耦合性 此處作為日常的小知識積累 不定期,補充更新 ♫. 積累 通常來
微信小程式 帶可拖動進度條和時間顯示的音訊播放器
眾所周知,微信官方自帶的音訊播放器是沒有進度條的,為了實現有進度條,並且拖動,只能自己寫一個了; 下面是演示圖 ①頁面載入完成後,能夠直接顯示音訊的時長 ②播放時,進度條變化,播放時間變化,拖動進度條可以跳轉到改進度播放 話不多說,直接上程式碼 首先是微信官
微信小程式尺寸單位rpx
rpx單位是微信小程式中css的尺寸單位,rpx可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iPhone6 上,螢幕寬度為375px,共有750個物理畫素,則750rpx = 375px = 750物理畫素,1rpx = 0.5px = 1物理畫素。 裝置
微信小程式 尺寸單位rpx與px,rem相互轉換
1. rpx :微信小程式開發中新出了尺寸單位rpx(responsive pixel): 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。 如在 iPhone6 上,螢幕寬度為375px,
微信小程式開發 檔案結構 js、wxml、wxss、json
檔案結構小程式包含一個描述整體程式的 app 和多個描述各自頁面的 page。一個小程式主體部分由三個檔案組成,必須放在專案的根目錄,如下:一個小程式頁面由四個檔案組成,分別是:檔案型別必填作用js是頁
微信小程式學習--基礎--尺寸單位 rpx
rpx (responsive pixel):是 WXSS 中引入新的尺寸單位,可以適配不同寬度的螢幕,規定螢幕寬為750rpx。相對px能保證在不同尺寸的手機螢幕內相對位置不偏移。rpx 與 px 之間的換算:換算基準:以375個物理畫素為基準,即在一個寬度為375物理畫素
微信小程式-尺寸單位rpx
rpx單位是微信小程式中css的尺寸單位,rpx可以根據螢幕寬度進行自適應。 Iphone裝置相關引數 裝置 螢幕尺寸 解析度(PT) Reader 解析度(px) 渲染後 PPI(DPI) iPhone 3G
微信小程式開發框架——WXSS(一)
WXSS語言決定了小程式頁面的各個元素在視覺上的展示,WXSS與CSS即為相試的、為了適合微信小程式開發WXSS對CSS進行相應的修改。 width:用來設定元素'寬度' / height:用來設定元素'高度 '/
微信小程式開發:二級、三級等多級聯動選單
二級級聯效果三級聯動效果 二級聯動和三級聯動的程式碼結構都是一樣,就看要怎麼設定。接下來上三級聯動的程式碼。 wxml <view class="picker-box"> <view class='skill-picker'&g
python、微信小程式及各種開發者課程視訊
這裡有海量程式開發視訊,從基礎入門到各技術語言進階,共計約1.5T,150元可以給到全部; python視訊從0開始學,從基礎班到就業班,以及Python AI的完整教程,包括基礎必備到高等數學,資料分析與挖掘,機器學習及自然語言處理;可以掃我微信二維碼加微信 廢話不多說,完整
Okam(奧卡姆):小程式開發框架,支援百度小程式、微信小程式、支付寶小程式
Okam(奧卡姆):小程式開發框架,支援百度小程式、微信小程式、支付寶小程式 Okam 是什麼 `Okam` 一個面向小程式開發的開發框架,開發體驗類 `Vue`。詳情 Okam 對各小程式的支援情況 支援 百度小程式 支援 微信小程式 支援 支付寶小程式 Okam 提供
微信小程式 - 獲取所在位置(省、市、區)
實現步驟 1. 獲取當前經緯度 2. 呼叫騰訊(百度、高德)地圖對應的請求地址,一般都會有獨一的key, 譬如 騰訊地圖呼叫地址: https://apis.map.qq.com/ws/geocoder/v1/?l
微信小程式的搜尋高亮、自定義導航條等踩坑記錄
原文地址:https://oomabc.com/articledetail?atclid=7421fe13daad46389791463f51d3395d 前言我在寫這個部落格的小程式過程中,遇到了很多的問題。之前斷斷續續也寫過不少JavaScript和css,不過都是半吊子。所以在看了一會
基於Taro + Dva構建的適配不同端(微信小程式、H5、React-Native 等)的時裝衣櫥
前言 Taro 是一套遵循 React 語法規範的 多端開發 解決方案。現如今市面上端的形態多種多樣,Web、React-Native、微信小程式等各種端大行其道,當業務要求同時在不同的端都要求有所表現的時候,針對不同的端去編寫多套程式碼的成本顯然非常高,這時候只編寫一套程式碼就能夠適配到多端的能力就顯得極