How many kinds of web page layouts are there?

The basic difference between stream layout and fixed width layout is that the measurement unit of website size is different. Fixed width layouts use pixels, but flow layouts use percentages. This web page provides strong plasticity and fluidity. In other words, by setting the percentage, we don't need to consider the device size or screen width, we can find a feasible solution for each situation, because your design size will adapt to all device sizes. Stream layout is closely related to media query and style optimization technology.

(2) Fixed layout

In a fixed layout, the width of a web page must be specified as a pixel value, usually 960px. Previously, developers found that 960px is the most suitable width for grid layout, because 960 can be divided by 3, 4, 5, 6, 8, 10, 12, 15. Nowadays, fixed-width layout is widely used in web development because of its strong stability and controllability. But it also has some disadvantages. Fixed width must consider whether the website can adapt to different screen widths.

(3) Flexible layout

Flexible layout and flow layout are very similar, the main difference is the size unit. The size unit of flexible layout is not pixel or percentage, but em or rem, which avoids the shortcoming that it is almost unrecognizable at high resolution according to px and is more flexible than% percentage. At the same time, it can support the normal display of browser font size adjustment and scaling, which takes some time to adapt and is not easy to convert from other layouts.

(4) Flexible flexible box

Use css3Flex series attributes for relative layout. Support for rich media and complex typesetting is very great, but there are compatibility problems.

(5) Sensitive response

Use @media media query to switch different styles for devices of different sizes and media. Excellent response range design can give a good experience to the equipment within the adaptation range.