REM Compatible Adaptation Solutions
REM Compatible Adaptation Solution
What is REM
REM (Font size of the root element) means relative to the root element The unit for the element's font size.
Example:
- If the root node
font-size
is set to10px
, then when using3rem
, After calculation, we get3*10 = 30px
- If the root node is set to
20px
, after calculation, we get3*20 = 60px
Why use REM
- Compared with
Flow layout
,Responsive layout
and other adaptation methods,REM adaptation
is more flexible and adapts proportionally according to the root node on different screen sizes - Good compatibility (Android 2.1+ / iOS 4.1+)
- Easy to use, from
px -> rem
you can use workflow to automatically complete
tmt-workflow benchmark value agreement
<html>
The default width of the root node isfont-size
=20px
- The default width of the visual manuscript is
375px
(i.e. iPhone 6 size) - Other screen widths are based on the vision of iPhone 6 and scaled proportionally
- rem The unit effective range is all inline and outline style CSS Attribute values, except
1px
tmt-workflow REM scheme usage ideas
- Used uniformly during the encoding process
After px
is compiled as a unit - workflow,
px
->rem
is automatically completed - calls lib-rem.less for personalization Screen ratio adaptation settings
Enable REM
First, edit the configuration file .tmtworkflowrc
as follows:
{ "supportREM": true}
Again, introduce lib-rem.less in the project LESS export file
Process details
After opening, CSS is divided into External style
and Inline style
Two parts of logic execution:
Less -> CSS
process, thein LESS is processed by the plug-in postcssPxtorem px
Perform unit conversionHTML/EJS -> HTML
process, the plug-in posthtmlPx2rem will be used to perform unit conversion oninline styles
in HTML Conversion
Other points to note
1. Compatible with 1px problem
Consider the conversion of 1px to rem
will have a decimal bug, the conversion of 1px
will be ignored in the workflow, and the minimum conversion value is 2px
.
See: postcss-pxtorem option:minPixelValue
See: posthtmlPx2rem option:minPixelValue
2. Sprite image compatibility issues
To avoid sprite image encounters Decimal calculation bug, set the gap between each element in the sprite image to 4px
, see _tasks/TaskBuildDist.js
3. Force not to use REM's preset Leave hack
If you want a certain CSS
style not to perform unit conversion, you can use the following case-sensitive px
writing method:
For example: 12PX
Proxy 12px
, so this CSS
attribute will be ignored in the workflow and unit conversion will not be performed