WeChat mini program rpx unit

高洛峰
Release: 2017-02-21 16:06:19
Original
2058 people have browsed it

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.

The WeChat applet size unit

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

Style import of the mini program

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;
}
Copy after login
/** app.wxss **/
@import "common.wxss";.middle-p {  padding:15px;
}
Copy after login

Mini program inline style

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}};" />
Copy after login
  • 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" />
Copy after login

css selector

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

Global styles and local styles of mini programs

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template