• CSS
  • 尺寸單位
  • 樣式導(dǎo)入
  • 適配樣式
  • 內(nèi)聯(lián)樣式
  • 選擇器權(quán)重
  • 常見問題
    • Q：如何避免橫屏播放時，icon 變大的問題？
    • Q：百度小程序里面可以和微信小程序一樣使用 rpx 嗎？
    • Q：請問如何設(shè)置首頁背景圖剛好鋪滿屏幕？
    • Q：小程序在 iPhonex 上，頁面最后的樣式加上 margin-bottom 值不顯示該如何處理？

CSS

CSS 是描述 SWAN 的樣式語言。支持 CSS 的屬性。
在此基礎(chǔ)上，做了一些編譯支持：

為射洪等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及射洪網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、射洪網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

• 尺寸單位
• 樣式導(dǎo)入

尺寸單位

• 對于自適應(yīng)的單位，推薦使用 CSS3 vw 為單位，vw 代表視窗( Viewport )的寬度為 1%；
• 同時也支持 rpx，規(guī)定屏幕寬為 750rpx。在 iPhone X 上，屏幕寬度為 375px，共有 750 個物理像素，則 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。

設(shè)備	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

樣式導(dǎo)入

為了工程化和代碼復(fù)用，我們支持 @import 語句，導(dǎo)入 CSS 文件。

代碼示例

• CSS

 
 
 
  
  
  
/* header.css */
  
  
  
.header {
  
  
  
 padding: 8px;
  
  
  
}
  
  
  
  
  
  
/* index.css */
  
  
  
@import "header.css";
  
  
  
.body {
  
  
  
 padding: 12px;
  
  
  
}
 
 

適配樣式

為了兼容 iPhoneX 底部安全區(qū)，我們提供了一組兼容樣式：

• CSS

 
 
 
  
  
  
.swan-security-padding-bottom {
  
  
  
 padding-bottom: 34px;
  
  
  
}
  
  
  
.swan-security-margin-bottom {
  
  
  
 margin-bottom: 34px;
  
  
  
}
  
  
  
.swan-security-fixed-bottom {
  
  
  
 bottom: 34px;
  
  
  
}
 
 

注意：該組樣式會自動在需要適配安全區(qū)的場景動態(tài)注入，開發(fā)者不需要自行添加，只要在.swan文件中使用這組類名即可。

代碼示例

• SWAN

 
 
 
  
  
  
  
  
  
test
  
  
  
 
 

基礎(chǔ)庫 3.140.17 開始我們將同時支持 safe-area-inset-* 的寫法，建議使用以下 css 進行兼容

• CSS

 
 
 
  
  
  
padding-bottom: constant(safe-area-inset-bottom);
  
  
  
padding-bottom: env(safe-area-inset-bottom);
 
 

內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式與 Web 開發(fā)一致,且支持動態(tài)更新

代碼示例

• SWAN
• JS

 
 
 
  
  
  
 swan 
 
 

 
 
 
  
  
  
Page({
  
  
  
 data: {
  
  
  
 eleColor: 'red',
  
  
  
 eleFontsize: '48rpx'
  
  
  
 }
  
  
  
});
 
 

選擇器權(quán)重

權(quán)重越高越優(yōu)先。在優(yōu)先級相同的情況下，后設(shè)置的樣式優(yōu)先級高于先設(shè)置的樣式。

代碼示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• CSS

 
 
 
  
  
  
view {
  
  
  
 // 權(quán)重為 1
  
  
  
 color: blue;
  
  
  
}
  
  
  
  
  
  
.ele {
  
  
  
 // 權(quán)重為 10
  
  
  
 color: red;
  
  
  
}
  
  
  
  
  
  
#ele {
  
  
  
 // 權(quán)重為 100
  
  
  
 color: pink;
  
  
  
}
  
  
  
  
  
  
view#ele {
  
  
  
 // 權(quán)重為 1 + 100 = 101，優(yōu)先級最高，元素顏色為orange
  
  
  
 color: orange;
  
  
  
}
  
  
  
  
  
  
view.ele {
  
  
  
 // 權(quán)重為 1 + 10 = 11
  
  
  
 color: green;
  
  
  
}
 
 

說明：

• 使用時請注意 box-sizing 屬性為非默認(rèn)值的場景；
• 百度 App 11.0 版本開始支持 iPhoneX，11.0.5 開始支持 iPhoneXS iPhoneXSMax iPhoneXR。

常見問題

Q：如何避免橫屏播放時，icon 變大的問題？

A：請使用 px 單位來書寫 css ，不建議使用 rpx 等其他單位。

Q：百度小程序里面可以和微信小程序一樣使用 rpx 嗎？

A：支持的。

Q：請問如何設(shè)置首頁背景圖剛好鋪滿屏幕？

A：可以按照以下設(shè)置方式進行嘗試，給 body 標(biāo)簽指定背景圖，這樣背景圖就可以填充整個瀏覽器 viewport 了。

代碼示例

 
 
 
  
  
  
body {
  
  
  
 margin: 0;
  
  
  
 background: url("xxx圖片地址") no-repeat;
  
  
  
 background-size: cover;
  
  
  
 background-position: center center;
  
  
  
 background-attachment:fixed;
  
  
  
}
 
 

注意：
1.為了使背景圖片的寬高不小于容器的寬高，需設(shè)置background-size: cover;進行填充，如果背景圖小于 body 標(biāo)簽的尺寸，瀏覽器會拉伸圖片。當(dāng)把一個圖片拉伸時，圖片會變模糊，所以在選擇背景圖片時，寬高要大一些。
2.為了讓背景圖始終相對于 viewport 居中，需設(shè)置background-position: center center;。
3.當(dāng)內(nèi)容的高度大于 viewport 的高度時，會出現(xiàn)滾動條。希望背景圖始終相對于 viewport 固定，即使用戶滾動時也是一樣，解決方案：background-attachment: fixed;。

Q：小程序在 iPhonex 上，頁面最后的樣式加上 margin-bottom 值不顯示該如何處理？

A：兼容 iphoneX 方案。

本文標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：CSS
URL分享：http://www.dlmjj.cn/article/dpedeep.html