1e41f4b71Sopenharmony_ci# Layout Description 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci 4e41f4b71Sopenharmony_ciThe baseline width for page design is 720 logical pixels. The display width of a page element depends on the ratio of the screen width to the baseline width. 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ci 7e41f4b71Sopenharmony_ciFor example, when the width of a component is 100 px, its display width is converted as follows: 8e41f4b71Sopenharmony_ci 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ciOn a screen with the width of 720 physical pixels, the display width is 100 physical pixels. On a screen with the width of 1440 physical pixels, the display width is 200 physical pixels. 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ciBasic page elements include title, text, and image areas. Each basic element may contain multiple sub-elements. You can add components, such as buttons, switches, and progress bars, to these elements and sub-elements as required. When setting the layout, you need to consider the following for each basic element: 13e41f4b71Sopenharmony_ci 14e41f4b71Sopenharmony_ci 15e41f4b71Sopenharmony_ci- Size and arrangement 16e41f4b71Sopenharmony_ci 17e41f4b71Sopenharmony_ci- Overlapping with other elements 18e41f4b71Sopenharmony_ci 19e41f4b71Sopenharmony_ci- Alignment, padding, and margin 20e41f4b71Sopenharmony_ci 21e41f4b71Sopenharmony_ci- Sub-elements and their positions 22e41f4b71Sopenharmony_ci 23e41f4b71Sopenharmony_ci- Container components and their types 24e41f4b71Sopenharmony_ci 25e41f4b71Sopenharmony_ci You can disassemble elements on the page first and then implement them in sequence. This reduces visual confusion and logical conflicts caused by element nesting and improves code readability for easier modification. For example, as shown below, you disassemble the page elements and elements in the comment area. 26e41f4b71Sopenharmony_ci 27e41f4b71Sopenharmony_ci Figure 1 Page layout 28e41f4b71Sopenharmony_ci 29e41f4b71Sopenharmony_ci  30e41f4b71Sopenharmony_ci 31e41f4b71Sopenharmony_ci Figure 2 Layout of the comment area 32e41f4b71Sopenharmony_ci 33e41f4b71Sopenharmony_ci 34
