Mobile Platform as a Service:Unit

Numeric Unit

Some attributes in the card need to be implemented in pure numerical units, such as flex and lines. In this case, px and vw are not added after the value.

For more information about the value ranges and value types of pure numeric values, see the property definitions of each component in . If a impure value is encountered, it is processed as 0 by default.

Example:

lines:5;
flex:1;

Time Unit

Some attributes of cards need to be described by time, for example, animation-duration. Cards support time units in seconds and milliseconds.

Example:

animation-duration:2s;

Length Unit

The card has several different units to indicate the length. The length consists of a number and a unit. No space can appear between the number and the unit. The length units are divided into built-in units and custom units.

Built-in Unit

Relative length

Relative length units specify the properties of one length relative to another. For different equipment relative length is more suitable

• vw:viewpoint width, window width, 1vw=1% of the window width.

• %: Percentage of window height /width.

Example:

font-size: 20vw;
background-size:50%;

Absolute length

An absolute length unit is a fixed value that reflects a real physical dimension. The absolute length unit depends on the output medium and does not depend on the environment (monitor, resolution, operating system, etc.)

• px: pixel (1px = 1/96th of 1in)

• rpx: calculated based on 750, 2rpx = 1px

Example:

font-size: 17px;
line-height:40rpx;

Click here detailLength.zip for the complete sample code.

Color Unit

Colors in cards can be specified in the following ways:

• Hexadecimal

• RGB Color

• Color Name

Hex Color

There are several ways to specify the components of a hexadecimal color:

• # RRGGBB, where RR (red), GG (green) and BB (blue). All values must be between 0 and FF.

For example, the #0000FF value is rendered blue because the blue component is set to the highest value FF and the others are set to 0.

• # RGB, where R (red),G (green) and B (blue). All values must be between 0 and F.

For example, the #00F value appears blue because the blue component is set to the highest value F and the others are set to 0.

• 0xrrggbb, where rr (red),gg (green) and bb (blue). All values must be between 0 and ff.

For example, the 0x0000ff value appears blue because the blue component is set to the highest value ff and the others are set to 0.

Example:

background-color:#ff0000;
border-top-color:0x0000ff;
border-bottom-color:#00f;

RGB Color

There are several ways to specify the color of an RGB component:

• RGB (red, green, blue). Each parameter (red, green and blue) defines the brightness of the color, as an integer between 0 and 255. For example, an RGB (0,0,255) value is rendered as blue because the parameter for blue is set to the highest value of 255 and the others are set to 0.

• RGBA (red, green, blue, alpha). The alpha parameter is between 0.0 (fully transparent) and 1.0 (fully opaque). For example, an RGB (0,0,255,0.5) value appears as translucent blue.

Example:

background-color:rgb(0,0,255);
border-color:rgba(255,0,0,0.5);

Color Name

The card supports 147 color name definitions, including 17 standard colors and 130 other colors. The following table lists the names and corresponding hexadecimal values for all colors.

Standard Color

Others

Example

background-color:red;

Click here detailColor.zip for the complete sample code.

Appendix-Color Value Definition