It is recommended to use
% for dimension units in Taro, Taro will convert all units by default. In Taro, the size is written in a 1:1 relationship, that is, if the length
100px is measured from the design, then the size is written as
100px, and when it is converted to WeChat mini-program, the size will be converted to
100rpx by default, and when it is converted to H5, it will be converted to a value in
rem by default.
If you want some of the
px units not to be converted to
rem, it is most convenient to add a capital letter to the px units, such as
PX, which will be ignored by the conversion plugin.
Taro defaults to
750px as the conversion size standard, if the design is not
750px, you need to set it in the project configuration
config/index.js, for example, if the design size is
640px, you need to modify the
828 sizes and their conversion rules are as follows.
When using Taro, it is recommended to use iPhone 6
750px as the design size standard.
If your design is
375, which is not one of the three above, then you need to configure
375 and add the conversion rule in
DEVICE_RATIO as follows.
During compilation, Taro will do the size conversion for you, but if you write inline styles in JS, you can't do the replacement.
In this case, Taro provides the API
Taro.pxTransform to do the size conversion at runtime.
The default configuration converts all
px units, and
PX with uppercase letters are ignored.
The default values of the parameters are as follows：
Object | Null
Set whether 1px needs to be converted
The number of decimal places allowed in the REM unit.
The property that allows the conversion.
- Values need to be exact matches.
- Use wildcard
*to enable all properties. Example:
*at the start or end of a word. (
!to not match a property. Example:
- Combine the "not" prefix with the other prefixes. Example:
Selectors in the blacklist will be ignored.
- If value is string, it checks to see if selector contains the string.
- If value is regexp, it checks to see if the selector matches the regexp.
Replace directly instead of appending an entry to override.
Allow px unit conversion in media queries
Set a minimum px value that can be converted
The configuration rules correspond to
The simplest way to ignore individual attributes currently is to use capital letters for px units.
The plugin does not handle files with the comment
/*postcss-pxtransform disable*/ in the header.
When multiple lines of text are omitted from a style file we generally use the following code.
However, Taro is compiled without the
-webkit-box-orient: vertical; style attribute, so we need to ignore this style