Three la s of web pages (fixed-width, fluid, and elastic)

For front-end students, web page layout is the basic skill, and it is not a qualified web page reconstruction engineer without page layout. In our daily work, the most commonly used layout method is fixed-width layout. Anyway, the companies I have worked for basically use fixed page la S. The reason why the fixed-width layout is the most widely used is simple because it is simple and easy to use. Fluid and elastic la s are mostly used on forums or personal blogs.

I also mentioned that fixed-width layout is currently the most common layout method in China. The advantage is that fixed-width layout makes the layout easier and allows developers to have greater control over layout and positioning. However, the layout with fixed width also has disadvantages, because its width is fixed, regardless of the size of the window, its size is always unchanged, so it cannot make full use of available space. Therefore, they are often considered to be a bad balance.

It is useless to say more. Let's take a look at the example of a fixed-width layout. Html code:

Css style code:

{:;:; }{:;}{:;:;}{:;:; }{:;:;}{:;:;:;}

The above is the fixed-width layout that we often apply at work.

Next, let's look at the Fluid layout. What is different from the fixed-width layout? when using a Fluid layout, the ruler uses percentages instead of pixels, this allows the Fluid layout to scale relative to the browser window. The column width increases as the window grows. Otherwise, the column width decreases as the window decreases. Fluid layout can be used very efficiently. However, Fluid layout also has its own problems. When the window width is small, the rows become very narrow and read very much. Therefore, it is necessary to add min-width in pixels or em to prevent the layout from becoming too narrow. However, if the min-width setting is too large, the limit is the same as that of the fixed width layout.

First, set the container width to the percentage of the total window width, and then set the width of the main content and secondary content area in the form of the white score of the container width.

The page layout is consistent with the fixed-width html code.

The css code is as follows:

{:;:;:;:;}{:;}{:;:;}{:;:; }{:;:;}{:;:;:;}

This Fluid layout can now be changed based on window changes.

The Fluid layout can make full use of space, but on a large-resolution display, the row will still be too long, making that user uncomfortable. On the contrary, in a narrow window or when the text font size is increased, the lines become very short and the content is very fragmented. For this problem, the following flexible layout may be a solution.

Set the width of the element relative to the font size (rather than the browser width) of the elastic layout, and set the width in em. The layout can be expanded as the font size increases. In this way, the rows can be kept within the readable range. Of course, like other la S, elastic la。 s have some problems that are the same as fixed-width la S and cannot fully utilize the available space. In addition, when the text font size increases, the overall layout will increase, so the flexible layout will become wider than the browser window, resulting in horizontal scroll bars. To prevent this situation, you may need to add max-width to 100% on the container div. ie6 does not support max-width. To ensure compatibility with IE6, you must use javascript.

The key skill of auto layout is to set the base font size so that 1em is roughly 10 pixels. We know that the default font size of most browsers is 16 pixels and 10 pixels is about 62.5% of 16 pixels, so you can set the font size to 62.5% on the subject.

The layout code is the same, and the main css is different:

{:;:;}{:;:;:; }{:;}{:;:;}{:;:; }{:;:;}{:;:;:;}

Do you understand the essence of layout from the examples? You can try it by yourself. In fact, in foreign countries, Fluid layout and elastic layout have been widely used, but in China, there are still relatively few applications.

Here is the demo of the layout mode. You can download it to see the highlights.