What are the web page layout methods?

In traditional web design, the size of all elements on a web page is px.

1. Layout characteristics

Regardless of the exact size of the browser, the layout of the page is always the same as when you first wrote the code. Conventional PC sites are statically laid out and have a minimum width, so if the width is less than this value, the scroll bar will be displayed, and if the width is greater than this value, the content center and background will be displayed. This design is very common on PC.

2. Design method

PC: Central layout, using absolute width/height (px) for all styles, designing a layout, adjusting the width and height of the screen, and using horizontal and vertical scroll bars to check the coverage; Mobile devices: Establish a separate mobile website, design a separate layout, and use different domain names, such as wap. Or m.

Advantages: This layout is the simplest for designers and CSS writers, and there is no compatibility problem.

Disadvantages: Obviously you can't change the user's screen size. At present, most portal websites and most enterprise PC advertising websites have adopted this layout. A web page with a fixed pixel size is the easiest way to match a display with a fixed pixel size. However, this method is not a completely compatible way to create future web pages. We need some methods to adapt to the unknown equipment.

Second, the process layout

Liquid layout (also called "fluid") is characterized by adjusting the width of page elements according to the screen resolution, but the overall layout remains unchanged. Representative fence system (grid system). For example, set the width of the main page body to 80 and the minimum width to 960 pixels. Images are similarly processed (width: 100%, and the maximum width is usually set to the size of the image itself to prevent distortion due to stretching).