CSS

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

  • 尺寸单位
  • 样式导入

# 尺寸单位

  • 对于自适应的单位,推荐使用 CSS3 vw 为单位,vw 代表视窗( Viewport )的宽度为 1%;
  • 同时也支持 rpx,规定屏幕宽为 750rpx。在 iPhone X 上,屏幕宽度为 375px,共有 750 个物理像素,则 750rpx = 375px = 750 物理像素,1rpx = 0.5px = 1 物理像素。

# 样式导入

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

代码示例

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

# 适配样式

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

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

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

代码示例

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

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

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

# 内联样式

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

代码示例

<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"> swan </view>
Page({
    data: {
        eleColor: 'red',
        eleFontsize: '48rpx'
    }
});

# 选择器权重

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

代码示例

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 方案:

<view class="swan-security-padding-bottom"></view>