1e41f4b71Sopenharmony_ci# Responsive Layouts 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ciWhen adaptive layouts cannot meet the experience requirements of different screens, you can set the relationship between containers and grids based on the screen features to implement a responsive layout. Generally, a responsive layout changes step by step according to breakpoint changes. 4e41f4b71Sopenharmony_ci 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ci## Breakpoint System 7e41f4b71Sopenharmony_ci 8e41f4b71Sopenharmony_ciOpenHarmony provides a breakpoint system that covers four screen types: ultra-small, small, medium, and large. It also provides the default number of columns for each screen type based on the grid system. Different devices display different numbers of columns based on their screen widths within different breakpoint ranges. You can also customize grids for a specific screen. 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ci 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ciThe breakpoint system corresponds to actual device types. Ultra-small corresponds to a wearable, small corresponds to the default device, medium corresponds to a tablet, and large corresponds to a smart TV or PC. You can perform adaptation for the screen type as required. 13e41f4b71Sopenharmony_ci 14e41f4b71Sopenharmony_ciThe increase of smart device types brings different interaction capabilities for the screen types, for example, an action camera (small) that supports touch, a portable PTZ (small or medium) that supports joysticks, and an immovable smart desk lamp (medium or large). Therefore, you also need to carry out design based on device interaction. 15e41f4b71Sopenharmony_ci 16e41f4b71Sopenharmony_ci 17e41f4b71Sopenharmony_ci## Indentation Layout 18e41f4b71Sopenharmony_ci 19e41f4b71Sopenharmony_ciThis layout reveals different indentation effects on devices with different screen widths. 20e41f4b71Sopenharmony_ci 21e41f4b71Sopenharmony_ci 22e41f4b71Sopenharmony_ci 23e41f4b71Sopenharmony_ciThe indentation layout is applicable if over 50% of the screen is blank after stretching or if there are more than 30 characters in each line while hierarchical UIs are unavailable or not suitable for simultaneous display. 24e41f4b71Sopenharmony_ci 25e41f4b71Sopenharmony_ciThe default implementation indents a grid with 8 or 12 columns to a grid with 6 or 8 columns. 26e41f4b71Sopenharmony_ci 27e41f4b71Sopenharmony_ci 28e41f4b71Sopenharmony_ci## Orientation Layout 29e41f4b71Sopenharmony_ci 30e41f4b71Sopenharmony_ciThis layout changes the content orientation from top/bottom to left/right and vice versa. 31e41f4b71Sopenharmony_ci 32e41f4b71Sopenharmony_ciFor example, the image and text arranged up and down in the portrait mode are arranged left and right in the landscape mode. 33e41f4b71Sopenharmony_ci 34e41f4b71Sopenharmony_ci 35e41f4b71Sopenharmony_ci 36e41f4b71Sopenharmony_ciThe orientation layout is applicable to device orientation changes and the scenario that requires content integrity while the aspect ratio changes significantly (greater than 200%). 37e41f4b71Sopenharmony_ci 38e41f4b71Sopenharmony_ci 39e41f4b71Sopenharmony_ci## Repetition Layout 40e41f4b71Sopenharmony_ci 41e41f4b71Sopenharmony_ciThis layout allows you to place components with the same attributes horizontally in parallel on a wide screen. 42e41f4b71Sopenharmony_ci 43e41f4b71Sopenharmony_ci 44e41f4b71Sopenharmony_ci 45e41f4b71Sopenharmony_ciThe repetition layout applies to images and their combinations that are sensitive to the aspect ratio when the original image is scaled by more than 150%. 46e41f4b71Sopenharmony_ci 47e41f4b71Sopenharmony_ciThe default implementation repeatedly lays out a grid with 4 columns when there are 8 or 12 columns. 48e41f4b71Sopenharmony_ci 49e41f4b71Sopenharmony_ci 50e41f4b71Sopenharmony_ciThe responsive layouts correspond to the breakpoint system and media query capability of OpenHarmony. 51
