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 / 屏幕宽度）
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

样式导入

为了工程化和代码复用，我们支持 @import 语句，导入 CSS 文件。

代码示例

  • CSS
  1. /* header.css */
  2. .header {
  3.     padding: 8px;
  4. }
  6. /* index.css */
  7. @import "header.css";
  8. .body {
  9.     padding: 12px;
  10. }

适配样式

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

  • CSS
  1. .swan-security-padding-bottom {
  2.     padding-bottom: 34px;
  3. }
  4. .swan-security-margin-bottom {
  5.     margin-bottom: 34px;
  6. }
  7. .swan-security-fixed-bottom {
  8.     bottom: 34px;
  9. }

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

代码示例

  • SWAN
  1. <!--test.swan-->
  2. <view class="swan-security-padding-bottom">test</view>
  3. <!--在iPhoneX等机型下，该view节点会自动获得一个“padding-bottom:34px”的样式-->

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

  • CSS
  1. padding-bottom: constant(safe-area-inset-bottom);
  2. padding-bottom: env(safe-area-inset-bottom);

内联样式

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

代码示例

  • SWAN
  • JS
  1. <view style="color: {{eleColor}}; font-size: {{eleFontsize}}"> swan </view>
  1. Page({
  2.     data: {
  3.         eleColor: 'red',
  4.         eleFontsize: '48rpx'
  5.     }
  6. });

选择器权重

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

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • CSS
  1. view { 
  2.     // 权重为 1
  3.     color: blue;
  4. }
  6. .ele { 
  7.     // 权重为 10
  8.     color: red;
  9. }
  11. #ele { 
  12.     // 权重为 100
  13.     color: pink;
  14. }
  16. view#ele { 
  17.     // 权重为 1 + 100 = 101，优先级最高，元素颜色为orange
  18.     color: orange;
  19. }
  21. view.ele { 
  22.     // 权重为 1 + 10 = 11
  23.     color: green;
  24. }

说明：

  • 使用时请注意 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 了。

代码示例

  1. body {
  2.     margin: 0; 
  3.     background: url("xxx图片地址") no-repeat;
  4.     background-size: cover;
  5.     background-position: center center;
  6.     background-attachment:fixed;
  7. }

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

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

A：兼容 iphoneX 方案<view class="swan-security-padding-bottom"></view>。