tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Tencent Cloud Mini Program Platform
    Documentation

    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.

      Contact Us
      Technical Support

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

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy