整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
一章繼續(xù)wxss 的講解，
一是樣式導(dǎo)入的使用方法。
二是 wxss 的選擇器。
在wxss中，直接?持樣式導(dǎo)?功能。
樣式導(dǎo)入的方法：使? @import 語句可導(dǎo)?外聯(lián)樣式表，但只?持相對路徑。
接下來，我們簡單演示一下如何使用 @import 語句來進行樣式導(dǎo)入。
1、在app.json中，新建頁面 demo06
2、在項目中新建文件夾styles，并新建文件 common.wxss ，如下圖。
3、在文件 common.wxss 中，寫入view 樣式，顏色是藍色，字體是100px
如下圖：
4、在demo06.wxss 文件中，刪掉原先的代碼，通過@import 語句來引入，并且路徑只能寫相對路徑，代碼如下，保存：
5、在demo06.wxml 文件中，將text 標(biāo)簽改為view 標(biāo)簽，保存，界面如下：
可以看到小程序頁面的字體大小和顏色已經(jīng)變化，樣式導(dǎo)入成功！
是不是超簡單~~~~
wxss的選擇器和css 的選擇器基本一樣，但是有一點需要注意：
wxss 的不支持通配符 * ！！！
以下代碼是無效的！ ！！
上述這幾行代碼在我們進行樣式初始化時經(jīng)常使用，但是現(xiàn)在在小程序當(dāng)中是不能使用的。
解決方法：將通配符* 修改為標(biāo)簽名，比如：view，text，等，以這個形式來實現(xiàn)初始化的功能
除此之外，所用的選擇器的樣例和功能解釋與css 的是無差的，可參考下圖：
文末福利：有童鞋可能不了解css選擇器的相關(guān)知識，這里我找了一篇文章，有興趣可看看：
作者：大前端世界
https://www.jianshu.com/p/aee8cf7d0183
章以后的四章都是介紹小程序樣式文件——wxss 的使用，分為以下三個部分
一、尺寸方案
二、樣式導(dǎo)入
三、選擇器
這章先來講wxss的尺寸單位—— rpx
wxss的定義：
WXSS( WeiXin Style Sheets )是?套樣式語言，用于描述 WXML 的組件樣式。
與 CSS 相比，WXSS 擴展的特性有：
響應(yīng)式?度單位 rpx 樣式導(dǎo)?
rpx （responsive pixel）: 可以根據(jù)屏幕寬度進行自適應(yīng)。
我們規(guī)定屏幕寬為 750rpx ，
如在 iPhone6 上，屏幕寬度為 375px ，共有750個物理像素， 則 750rpx=375px=750 物理像素， 1rpx=0.5px=1 物理像素 。
小程序中，若需要做一個頁面布局，實現(xiàn)頁面的元素大小跟隨屏幕改變而發(fā)生改變的話，
則需要用到rpx單位。
接下來，我們用代碼來演示以上知識點。
第一步先來定一個需求：
如下圖所示，此設(shè)計稿為 750px，里面包含200px × 200px 的頁面，
并且所含文字的像素是40px
我們要將此設(shè)計稿和下圖右側(cè)的屏幕相匹配：
屏幕為375rpx，里面的頁面是100 ×100 ，文字是20px
我們要做的就是將750rpx 的設(shè)計稿等比例變換為375rpx 的比例
這就是我們的需求了，接下來通過代碼一步步實現(xiàn)了~~
1、打開app.json 文件，新建demo05 頁面
2、打開demo05.wxml 文件，刪掉原先代碼，加入view 標(biāo)簽，代碼如下
<view>
rpx
</view>這里，要補充一點：
小程序中不需要手動引入樣式文件，不需手動添加link 標(biāo)簽，
只需確保demo05 文件夾下的文件名稱統(tǒng)一均為 demo05 即可，
小程序會自動匹配同名文件并引入。
3、打開demo05.wxss 文件，刪掉原先代碼，寫入如下代碼：
寬：200px；高：200px；字體大小：40px；背景顏色：藍色。
view{
width: 200px;
height: 200px;
font-size:40px;
background-color: aqua;
}保存后，界面如下所示：
可以看到，現(xiàn)在屏幕的寬度為375px，機型為iphone6
若我們先直接將屏幕 由375px 改為 750px , 藍色方塊的比例會隨之變化嗎？
修改后（若找不到750選項，可點擊機型--自定義，手動添加屏幕數(shù)據(jù)），
對比前后的藍色部分，可明顯看到是一樣的！
雖然屏幕比例擴大了很多，但是藍色區(qū)域還是未隨屏幕比例發(fā)生任何改變！
所以要實現(xiàn)這一需求，就需先將頁面中某些元素的單位由 px 修改為rpx，或者修改百分比也行，
即換算單位！
比如：設(shè)計稿的像素為750， 則750px=750rpx, 也就是 1px=1rpx
4、 我們將demo05.wxss 中的px 修改為rpx,
由這樣：
view{
width: 200px;
height: 200px;
font-size:40px;
background-color: aqua;
}變?yōu)檫@樣：
view{
width: 200rpx;
height: 200rpx;
font-size:40rpx;
background-color: aqua;
}我們的需求中，是要實現(xiàn)375px 的屏幕， 所以，375px=750rpx，即1px=2rpx 根據(jù)這個比例，若將屏幕界面的機型改為 iphone6 (375px)，那藍色區(qū)域的部分應(yīng)該縮小一半！
5、將屏幕界面的機型改為 iphone6 (375px)，觀察藍色區(qū)域的大小變化
對比很容易發(fā)現(xiàn)，藍色部分已經(jīng)隨屏幕的比例發(fā)生相應(yīng)改變了！
這也就實現(xiàn)了我們的第一個需求！哈哈
上面的例子中，750px 和375px 是等比例關(guān)系，很容易換算
那如果現(xiàn)在的設(shè)計稿寬度是100px，長度未知，（用page表示），
用以上代碼如何實現(xiàn)不同寬度的頁面適配呢？
1、換算
page=750rpx
1px=750 rpx/page，將寬度 100px 代入后（兩邊都 ? 100）
100px=750rpx × 100/page
按照小學(xué)課本里的換算，
這里100px的賦值可以直接代入到代碼中去
比如這里page=375，width的值還是100px,
view{
width: 100rpx;
height: 200rpx;
font-size:40rpx;
background-color: aqua;
}將 100px=750rpx × 100/375 寫入 width 中：
view{
width: 750rpx× 100/375;
height: 200rpx;
font-size:40rpx;
background-color: aqua;
}但是，
這不是完全的數(shù)學(xué)運算，這里的這種直接賦值也是不正確的！！！
不能直接寫成 width: 750rpx× 100/375 這種形式的！
切記！
它需要一個屬性來做外衣—— calc 屬性
2、在demo05.wxss 中，代碼的 width 部分加入 calc 屬性 ，其余不變，代碼如下：
view{
width: calc(750rpx*100/375);
height: 200rpx;
font-size:40rpx;
background-color: aqua;
}敲黑板：
在使用calc屬性時，比如上述代碼 width: calc(750rpx*100/375) 中， 750與rpx之間是不能有空格的！ 運算符* / 兩邊也是不能加空格！
保存后，界面如下:
3、改變屏幕比例，改為750px,觀察藍色部分的大小變化！
對比來看，藍色部分明顯已經(jīng)發(fā)生變化！我們的需求完成了！
所以，最后總結(jié)：
要想實現(xiàn)不同寬度的頁面適配，記住兩點即可
100px=750rpx × 100/page
使用calc 屬性 來書寫
大家實操后感覺如何呢？
歡迎下方留言給我，
有疑問可以直接私信我哈~~~
發(fā)一個公益志愿者服務(wù)招募的小程序，你需要考慮前端、后端、數(shù)據(jù)庫以及相關(guān)的第三方服務(wù)集成。以下是一個技術(shù)方案的概覽：
圖片來源pixabay
通過以上技術(shù)方案，你可以構(gòu)建一個功能全面、安全可靠、用戶體驗良好的公益志愿者服務(wù)招募小程序。在開發(fā)過程中，保持與團隊成員的良好溝通，確保項目按時完成并達到預(yù)期目標(biāo)。
深圳智根網(wǎng)絡(luò)專注志原者平臺系統(tǒng)開發(fā)，歡迎大家與深圳智根網(wǎng)絡(luò)小編交流學(xué)習(xí)！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
