• CSS
  • 尺寸单位
  • 样式导入
  • 适配样式
  • 内联样式
  • 选择器权重
  • 常见问题
    • Q：如何避免横屏播放时，icon 变大的问题？
    • Q：百度小程序里面可以和微信小程序一样使用 rpx 吗？
    • Q：请问如何设置首页背景图刚好铺满屏幕？
    • Q：小程序在 iPhonex 上，页面最后的样式加上 margin-bottom 值不显示该如何处理？

CSS

CSS 是描述 SWAN 的样式语言。支持 CSS 的属性。
在此基础上，做了一些编译支持：

为射洪等地区用户提供了全套网页设计制作服务，及射洪网站建设行业解决方案。主营业务为成都网站设计、成都网站制作、射洪网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

• 尺寸单位
• 样式导入

尺寸单位

• 对于自适应的单位，推荐使用 CSS3 vw 为单位，vw 代表视窗( Viewport )的宽度为 1%；
• 同时也支持 rpx，规定屏幕宽为 750rpx。在 iPhone X 上，屏幕宽度为 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 语句，导入 CSS 文件。

代码示例

• CSS

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

适配样式

为了兼容 iPhoneX 底部安全区，我们提供了一组兼容样式：

• CSS

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

注意：该组样式会自动在需要适配安全区的场景动态注入，开发者不需要自行添加，只要在.swan文件中使用这组类名即可。

代码示例

• SWAN

 
 
 
  
  
  
  
  
  
test
  
  
  
 
 

基础库 3.140.17 开始我们将同时支持 safe-area-inset-* 的写法，建议使用以下 css 进行兼容

• CSS

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

内联样式

内联样式与 Web 开发一致,且支持动态更新

代码示例

• SWAN
• JS

 
 
 
  
  
  
 swan 
 
 

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

选择器权重

权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• CSS

 
 
 
  
  
  
view {
  
  
  
 // 权重为 1
  
  
  
 color: blue;
  
  
  
}
  
  
  
  
  
  
.ele {
  
  
  
 // 权重为 10
  
  
  
 color: red;
  
  
  
}
  
  
  
  
  
  
#ele {
  
  
  
 // 权重为 100
  
  
  
 color: pink;
  
  
  
}
  
  
  
  
  
  
view#ele {
  
  
  
 // 权重为 1 + 100 = 101，优先级最高，元素颜色为orange
  
  
  
 color: orange;
  
  
  
}
  
  
  
  
  
  
view.ele {
  
  
  
 // 权重为 1 + 10 = 11
  
  
  
 color: green;
  
  
  
}
 
 

说明：

• 使用时请注意 box-sizing 属性为非默认值的场景；
• 百度 App 11.0 版本开始支持 iPhoneX，11.0.5 开始支持 iPhoneXS iPhoneXSMax iPhoneXR。

常见问题

Q：如何避免横屏播放时，icon 变大的问题？

A：请使用 px 单位来书写 css ，不建议使用 rpx 等其他单位。

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

A：支持的。

Q：请问如何设置首页背景图刚好铺满屏幕？

A：可以按照以下设置方式进行尝试，给 body 标签指定背景图，这样背景图就可以填充整个浏览器 viewport 了。

代码示例

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

注意：
1.为了使背景图片的宽高不小于容器的宽高，需设置background-size: cover;进行填充，如果背景图小于 body 标签的尺寸，浏览器会拉伸图片。当把一个图片拉伸时，图片会变模糊，所以在选择背景图片时，宽高要大一些。
2.为了让背景图始终相对于 viewport 居中，需设置background-position: center center;。
3.当内容的高度大于 viewport 的高度时，会出现滚动条。希望背景图始终相对于 viewport 固定，即使用户滚动时也是一样，解决方案：background-attachment: fixed;。

Q：小程序在 iPhonex 上，页面最后的样式加上 margin-bottom 值不显示该如何处理？

A：兼容 iphoneX 方案。

文章题目：创新互联百度小程序教程：CSS
文章来源：http://www.jxjierui.cn/article/dpedeep.html