WeChat mini-app WXSS and Wechat mini-app wxss

Source: Internet
Author: User

Mini-program WXSS, mini-program wxss

Series of articles:

Mini-program tutorial-WXSS
References to mini-program tutorials
Events of mini-program tutorials
Small Program tutorial Template
List rendering of Applet tutorials
Conditional rendering of mini-program tutorials
Data Binding in applet tutorial
Mini-program tutorial-WXML

WXSS

WXSS (WeiXin Style Sheets) is a Style language designed by MINA to describe WXML component styles.

WXSS is used to determine how to display WXML components.

To adapt to the majority of front-end developers, our WXSS has most of the CSS features. At the same time, in order to be more suitable for developing small programs, we have expanded and modified CSS.

Compared with css, our extended features include:

Dimension Unit
Style Import

Dimension Unit

Rpx (responsive pixel): adaptive to screen width. Specify that the screen width is 750rpx. For example, if the screen width of iPhone 6 is 375px and there are 750 physical pixels in total, 750rpx = 375px = 750 physical pixel, and 1rpx = 0.5px = 1 physical pixel.

Device Rpx conversion px (screen width/750) Px is converted to rpx (750/screen width)
IPhone 5 1rpx = 0.42px 1px = 2.34px
IPhone 6 1rpx = 0.5px 1px = 2rpx
IPhone6s 1rpx = 0.552px 1px = 1.81rpx

Rem (root em): specifies that the screen width is 20rem; 1rem = (750/20) rpx.

Suggestion: when developing small programs, designers can use iPhone 6 as the standard for visual drafts.

Style Import

You can use the @ import statement to import an external style table. @ import is followed by the relative path of the external style table to be imported.
Sample Code:

/** common.wxss **/.small-p{ padding:5px;}
/** app.wxss **/@import "common.wxss";.middle-p:{ padding:15px;}

Inline Style

The MINA component supports style and class attributes to control the style of the component.

Style: static styles are uniformly written to the class. The style receives dynamic styles and will be parsed at runtime. Therefore, do not write static styles into the style to avoid affecting the rendering speed.

<View style = "color :{{ color }};"/>

Class: Specifies a style rule. Its attribute value is a set of class selector names (Style class names) in the style rule. Style class names do not need to be included. Style class names are separated by spaces.

<View class = "normal_view"/>

Selector

Currently, the following selectors are supported:

Selector Example Example description
. Class . Intro Select All components with class = "intro"
# Id # Firstname Select a component with id = "firstname"
Element View Select all view Components
Element, element View checkbox Select view components and all checkbox components for all documents
: After View: after Insert content behind the view component
: Before View: before Insert content in front of the view component

Global style and local style

The style defined in app. wxss is a global style that acts on every page. The style defined in the wxss file of the page is a local style. It only applies to the corresponding page and will overwrite the same selector in app. wxss.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.