Large screen adaptation

Screen resolution: 1366768 and 19201080 and 2560*1440 and 4096 * 2160

The width of the adapter

  • Widths are implemented using percentages, whatever percentages are available
  • For large screens, to fit all fonts, the width can be adjusted by REM
:root {
  font-size: calc(100vw / 19.2);
}
/* The length of the element is / 100 rem, so that the width can be adjusted */
Copy the code

Highly adapted

Height adaptation is quite troublesome. It is necessary to deal with the problems caused by margin and padding, and control the display of the whole screen without scrolling bars

  • Padding-top and margin-top, if set to percentages, depend on the width of the parent element
  • Height sets the percentage based on the height of the parent element, if the parent element has a height
  • Top, the percentage is set according to the height of the parent element, left is set according to the width of the parent element
  • Line-height sets the percentage of the line height based on the current font size. 200% is the same as 2

Adaptive skills

  • By calC (100%-34px)
  • The height is percentile adapted, and vw and VH are preferred for large blocks of layout to be positioned to the specified position
  • For those that must be written in absolute units, the rest must be adapted using calc(100%-xpx)
  • For elements to be centered, use absolute to locate them
  • Since neither the write percentage of line height nor the write pixel is useful for height, try not to use line height to center elements
  • Finally, the details are modified using media queries

Font adaptation scheme

  • Fonts are adapted by REM, rather than by px, which will appear larger under a low split screen and smaller under a high screen
  • Assign the root element font via the media query or calc above

Echarts adaptation scheme

Echarts has not been adapted, so wherever there is text, a function is used to calculate the px below the current resolution and then assign it. Echarts font cannot be set to REM

Conclusion:

Rem + VW + VH + calc + % + media + position reasonable use of these, can achieve a variety of adaptation