The rpx unit is the size unit of CSS in the WeChat applet. rpx can be adapted according to the screen width. The specified screen width is 750rpx. For example, on iPhone6, the screen width is 375px and there are 750 physical pixels in total, then 750rpx = 375px = 750 physical pixels, 1rpx = 0.
rpx unit is WeChat The size unit of CSS in the mini program, rpx can be adapted according to the screen width. The specified screen width is 750rpx. For example, on iPhone6, 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.
| Device | rpx to px (screen width/750) | px to rpx (750/screen width) |
|---|---|---|
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx |
WeChat applet also supports rem size unit, the conversion relationship between rem and rpx: rem: the specified screen width is 20rem; 1rem = (750/20)rpx
Note: When developing WeChat mini programs, designers can use iPhone6 as the standard for visual drafts.
Suggestion: It is easier to calculate the design draft using a device width of 750px. If 750px is 750px, 1rpx=1px. In this case, the size measured in the design drawing is the number of px that is the number of rpx. As for the actual conversion on different devices, rem is left to the mini program to convert by itself
Use the @import statement to import the external style sheet, @import is followed by the external style sheet that needs to be imported Relative path, use; to indicate the end of the statement.
Sample code:
/** common.wxss **/.small-p { padding:5px;
}/** app.wxss **/
@import "common.wxss";.middle-p { padding:15px;
}Framework components support the use of style and class attributes to control the style of the component.
style: Static styles are written uniformly in class. style receives dynamic styles and will parse them at runtime. Please try to avoid writing static styles into style to avoid 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 name does not You need to bring ., and separate the style class names with spaces.
<view class="normal_view" />
The selectors currently supported by WeChat applet are:
| selector | Sample | Sample description |
|---|---|---|
| .class | .intro | Select all components with class="intro" |
| #id | #firstname | Select components with id="firstname" |
| element | view | Select all view components |
| element, element | view checkbox | Select the view components of all documents and all checkbox components |
| ::after | view::after | In view Insert content after the component |
| ::before | 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 page are local styles, which only apply to the corresponding page and will override the same selector in app.wxss.
For more articles related to the WeChat mini program rpx unit, please pay attention to the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
