Mobile web design has many benefits, but only when used correctly. Appropriate techniques will enable the page to be well presented on large screens, small screens, and small PDA screens. However, poor code structure will be disastrous for fluid layout. Therefore, we need to find feasible solutions to the shortcomings of most flow designs.
If you as a designer have gone the extra mile to create a functional flowing layout, why not go a step further and make it compatible with all resolutions instead of being limited to most screens. You can use a few techniques to create an unexpectedly adaptable layout that remains functionally intact as screen resolutions change.
In this article, we’ll discuss proven methods for creating 100% functional responsive CSS layouts, and provide a detailed list of other tutorials and practices:
You can also refer to previous articles:
1. Fluid layout using grid
Most of us have heard of the 960 grid system for designing fixed-width web pages. Using the 960 grid system makes fixed-width designs preferable to fluid layouts. However, there is a way to create a grid-based flex layout . Technically speaking, the code structure of elastic layout is different from that of fluid layout, but it provides almost the same effect to the user.
What is a flow layout?
Fluid grids are created through the intelligent use of divs, percentages and simple mathematical calculations. This idea comes from Ethan Marcotte, who recognized that "em" is an improvement over font size. We revisit this basic concept here, but for a comprehensive and detailed understanding of this approach, see "Flowing Grid," a comprehensive tutorial on building grid-based flexible layouts.
The idea is to use relative sizes, combine percentages and ems, and use simple splits to find the corresponding pixel widths that are used in fixed-width designs.
advantage :