tencent cloud

Feedback

WXSS

Last updated: 2024-03-04 23:15:05
    WXSS (WeiXin Style Sheets) is a stylistic language, utilized to delineate the aesthetic of WXML components. It determines the visual presentation of WXML components.
    To facilitate the usage by a broad spectrum of front-end developers, WXSS has adopted a majority of CSS features. Concurrently, to better cater to the requirements of developing TMF mini-programs, WXSS has undergone certain expansions and modifications.
    Compared to CSS, WXSS has extended the following features:
    Note:
    For iOS versions 8 and below, when utilizing flexbox layout, the attribute display: -webkit-flex needs to be added.

    Dimensional Units

    rpx (responsive pixel): This unit adapts according to the screen width. The screen width is set to be 750rpx. For instance, on an iPhone 6, the screen width is 375px, comprising 750 physical pixels, hence 750rpx = 375px = 750 physical pixels, and 1rpx = 0.5px = 1 physical pixel.
    In the development on the Tencent Cloud Mini Program platform, we utilize rpx as the unit of measurement to cater to the needs of different screen sizes. Below is the conversion relationship between rpx and px:
    When the device screen width is 750px, 1rpx equals 0.5px.
    When the device screen width is 750px, 1px equals 2rpx.
    The conversion relationship between rpx and px varies according to different device screen widths. For instance:
    On an iPhone 5, the device screen width is 320px, hence 1rpx equals 0.42px and 1px equals 2.34rpx.
    On an iPhone 6, the device screen width is 375px, hence 1rpx equals 0.5px and 1px equals 2rpx.
    On an iPhone 6 Plus, the device screen width is 414px, hence 1rpx equals 0.552px and 1px equals 1.81rpx.
    It is recommended that designers use the iPhone 6 as the standard for visual drafts when designing applications or mini-programs. However, it should be noted that some glitches may occur on smaller screens, thus it is essential to avoid such situations during development.

    Style Importation

    The @import statement can be used to import external style sheets. The @import is followed by the relative path of the external style sheet to be imported, and the statement is terminated with a ;.
    Sample Code:
    / common.wxss /
    .small-p {
    padding:5px;
    }
    / app.wxss /
    @import "common.wxss";
    .middle-p {
    padding:15px;
    }

    Inline Styles

    The framework components support the use of style and class attributes to control the style of the components.
    Style: Static styles should be uniformly written into the class. The style accepts dynamic styles, which will be parsed at runtime. Please try to avoid writing static styles into the style to prevent affecting the rendering speed.
    <view style="color:{{color}};" />
    Class: Used to specify style rules, its attribute value is a collection of class selector names (style class names) in the style rules. The style class names do not need to be prefixed with a ., and the style class names are separated by spaces.
    <view class="normal_view" />

    Selector

    The selectors currently supported are:
    Selector
    Example
    Example Description
    .class
    .intro
    Select all components with class="intro"
    #id
    #firstname
    Select the component with id="firstname"
    element
    view
    Select all view components
    element,element
    view, checkbox
    Select all view components and checkbox components within the document.
    ::after
    view::after
    Insert content following the view component.
    ::before
    view::before
    Insert content preceding the view component.

    Global styles versus local styles

    Styles defined in app.wxss are global styles, applicable to every page. Styles defined in a page's wxss file are local styles, only applicable to the corresponding page, and will override the same selectors in app.wxss.
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support