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 to 10px, then when using 3rem, After calculation, we get 3*10 = 30px
  • If the root node is set to 20px, after calculation, we get 3*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

  1. <html> The default width of the root node is font-size = 20px
  2. The default width of the visual manuscript is 375px (i.e. iPhone 6 size)
  3. Other screen widths are based on the vision of iPhone 6 and scaled proportionally
  4. rem The unit effective range is all inline and outline style CSS Attribute values, except 1px

tmt-workflow REM scheme usage ideas

  1. Used uniformly during the encoding process After px is compiled as a unit
  2. workflow, px -> rem is automatically completed
  3. 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:

  1. Less -> CSS process, the in LESS is processed by the plug-in postcssPxtorem px Perform unit conversion
  2. HTML/EJS -> HTML process, the plug-in posthtmlPx2rem will be used to perform unit conversion on inline 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