Home > Article > WeChat Applet > Introduction to WXSS in WeChat Mini Program
This article mainly introduces the relevant information of WeChat applet WXSS, and attaches simple example code. Friends in need can refer to
WXSS
##WXSS( WeiXin Style Sheets) is a style language designed by MINA for describing WXML component styles.Dimension unitStyle import
Size unit
rpx (responsive pixel): can be adapted according to the screen width. The specified screen width is 750rpx. For example, on iPhone 6, the screen width is 375px and there are 750 physical pixels in total, then 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixel.rpx to px (screen width/750) | px to rpx (750/screen width) | |
---|---|---|
1rpx = 0.42px | #1px = 2.34px | |
1rpx = 0.5px | 1px = 2rpx | |
1rpx = 0.552px | 1px = 1.81rpx |
Suggestion: When developing WeChat mini programs, designers can use iPhone6 as the standard for visual drafts.
Sample code:
/** common.wxss **/ .small-p{ padding:5px; }##
/** app.wxss **/ @import "common.wxss"; .middle-p:{ padding:15px; }Inline style
MINA components support using style and class attributes to control the style of the component.
style: Static styles are written uniformly into classes. style receives dynamic styles and will parse them at runtime, so do not write static styles into style to avoid affecting the rendering speed.
<view style="color:{{color}};" />
<view class="normal_view" />
Currently supported selectors are:
Sample | Sample description | |
---|---|---|
.intro | Select All components with class="intro" | |
#firstname | Select components with id="firstname" | |
view | Select all view components | |
view checkbox | Select the view components of all documents and all checkbox components | |
view::after | In the view component Insert content after | |
view::before | Insert content before the view component |
The styles defined in app.wxss are global styles and apply to every page. The styles defined in the wxss file of the page are local styles, which only apply to the corresponding page and will override the same selector in app.wxss.
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
About the introduction of WeChat applet sliderAbout WeChat applet implementation of top tab (swiper ) IntroductionAbout WeChat JS-SDK’s function of selecting mobile phone photo uploadThe above is the detailed content of Introduction to WXSS in WeChat Mini Program. For more information, please follow other related articles on the PHP Chinese website!