建站
咨詢
售后
建站咨詢
新聞中心
- CSS
- 尺寸單位
- 樣式導(dǎo)入
- 適配樣式
- 內(nèi)聯(lián)樣式
- 選擇器權(quán)重
- 常見問題
- Q：如何避免橫屏播放時(shí)，icon 變大的問題？
- Q：百度小程序里面可以和微信小程序一樣使用 rpx 嗎？
- Q：請問如何設(shè)置首頁背景圖剛好鋪滿屏幕？
- Q：小程序在 iPhonex 上，頁面最后的樣式加上 margin-bottom 值不顯示該如何處理？
CSS
CSS 是描述 SWAN 的樣式語言。支持 CSS 的屬性。
在此基礎(chǔ)上，做了一些編譯支持：
為射洪等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及射洪網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、射洪網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
- 尺寸單位
- 樣式導(dǎo)入
尺寸單位
- 對于自適應(yīng)的單位，推薦使用 CSS3 vw 為單位，vw 代表視窗( Viewport )的寬度為 1%；
- 同時(shí)也支持 rpx，規(guī)定屏幕寬為 750rpx。在 iPhone X 上，屏幕寬度為 375px，共有 750 個(gè)物理像素，則 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;}
注意：該組樣式會(huì)自動(dòng)在需要適配安全區(qū)的場景動(dòng)態(tài)注入，開發(fā)者不需要自行添加，只要在.swan文件中使用這組類名即可。
代碼示例
- SWAN
test
基礎(chǔ)庫 3.140.17 開始我們將同時(shí)支持 safe-area-inset-* 的寫法，建議使用以下 css 進(jìn)行兼容
- 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ā)一致,且支持動(dòng)態(tài)更新
代碼示例
- SWAN
- JS
swan
Page({data: {eleColor: 'red',eleFontsize: '48rpx'}});
選擇器權(quán)重
權(quán)重越高越優(yōu)先。在優(yōu)先級(jí)相同的情況下，后設(shè)置的樣式優(yōu)先級(jí)高于先設(shè)置的樣式。
代碼示例
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開
- CSS
view {// 權(quán)重為 1color: blue;}.ele {// 權(quán)重為 10color: red;}#ele {// 權(quán)重為 100color: pink;}view#ele {// 權(quán)重為 1 + 100 = 101，優(yōu)先級(jí)最高，元素顏色為orangecolor: orange;}view.ele {// 權(quán)重為 1 + 10 = 11color: green;}
說明：
- 使用時(shí)請注意 box-sizing 屬性為非默認(rèn)值的場景；
- 百度 App 11.0 版本開始支持 iPhoneX，11.0.5 開始支持 iPhoneXS iPhoneXSMax iPhoneXR。
常見問題
Q：如何避免橫屏播放時(shí)，icon 變大的問題？
A：請使用 px 單位來書寫 css ，不建議使用 rpx 等其他單位。
Q：百度小程序里面可以和微信小程序一樣使用 rpx 嗎？
A：支持的。
Q：請問如何設(shè)置首頁背景圖剛好鋪滿屏幕？
A：可以按照以下設(shè)置方式進(jìn)行嘗試，給 body 標(biāo)簽指定背景圖，這樣背景圖就可以填充整個(gè)瀏覽器 viewport 了。
代碼示例
body {margin: 0;background: url("xxx圖片地址") no-repeat;background-size: cover;background-position: center center;background-attachment:fixed;}
注意：
1.為了使背景圖片的寬高不小于容器的寬高，需設(shè)置background-size: cover;進(jìn)行填充，如果背景圖小于 body 標(biāo)簽的尺寸，瀏覽器會(huì)拉伸圖片。當(dāng)把一個(gè)圖片拉伸時(shí)，圖片會(huì)變模糊，所以在選擇背景圖片時(shí)，寬高要大一些。
2.為了讓背景圖始終相對于 viewport 居中，需設(shè)置background-position: center center;。
3.當(dāng)內(nèi)容的高度大于 viewport 的高度時(shí)，會(huì)出現(xiàn)滾動(dòng)條。希望背景圖始終相對于 viewport 固定，即使用戶滾動(dòng)時(shí)也是一樣，解決方案：background-attachment: fixed;。
Q：小程序在 iPhonex 上，頁面最后的樣式加上 margin-bottom 值不顯示該如何處理？
A：兼容 iphoneX 方案
當(dāng)前題目：創(chuàng)新互聯(lián)百度小程序教程：CSS
分享鏈接：http://fisionsoft.com.cn/article/dpedeep.html
