Home > Article > Backend Development > Explore the many forms of responsive layout
In-depth understanding of the various types of responsive layout requires specific code examples
Introduction:
With the popularity of mobile devices and the increasing demand for multi-screen browsing , responsive layout is becoming more and more important. When building a website or application, how to adapt to different screen sizes becomes a key issue. Through responsive layout, one set of code can be adapted to multiple devices, providing better user experience and accessibility. In this article, we will introduce the various types of responsive layout in detail and provide specific code examples to help readers better understand and apply responsive layout.
1. Fluid Layout
Fluid layout is the most basic type of responsive layout, which adapts to different screen sizes by using percentage widths. In a fluid layout, the width of the page automatically adjusts to changes in screen size, and content automatically scales relative to the screen. The following is a simple fluid layout sample code:
<!DOCTYPE html> <html> <head> <style> .container { width: 100%; max-width: 960px; margin: 0 auto; } .column { width: 100%; float: left; } @media (min-width: 600px) { .column { width: 50%; } } @media (min-width: 960px) { .column { width: 33.33%; } } </style> </head> <body> <div class="container"> <div class="column"> <p>Column 1</p> </div> <div class="column"> <p>Column 2</p> </div> <div class="column"> <p>Column 3</p> </div> </div> </body> </html>
In the above code, the container
class is used to set the width of the entire content area, and column## is used #Class to set the width of each column. Use media queries (
@media) to set column widths for different screen sizes.
Adaptive layout is a more flexible responsive layout type that adapts to different screen sizes by using different CSS styles. Unlike fluid layout, adaptive layout can choose different design layouts according to the width of the screen. The following is a simple adaptive layout sample code:
<!DOCTYPE html> <html> <head> <style> .container { width: 100%; max-width: 960px; margin: 0 auto; } .column { width: 100%; } @media (min-width: 600px) { .column { width: 50%; } } @media (min-width: 960px) { .column { width: 33.33%; } } </style> </head> <body> <div class="container"> <div class="column"> <p>Column 1</p> </div> <div class="column"> <p>Column 2</p> </div> <div class="column"> <p>Column 3</p> </div> </div> </body> </html>In the above code, the same
container class and
column class are used as the fluid layout, but different The point is that in adaptive layout under different screen sizes, the width of the
column class is fixed, rather than the percentage width relative to the parent container.
Flexible layout is a responsive layout type based on the flexible box model. It can better adapt to screens of different sizes and achieve a more flexible layout. Flexible layout can be easily implemented by using the
display: flex property and the related flexlayout properties. The following is a simple flexible layout sample code:
<!DOCTYPE html> <html> <head> <style> .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .column { width: 100%; flex-basis: 100%; } @media (min-width: 600px) { .column { width: 50%; flex-basis: 50%; } } @media (min-width: 960px) { .column { width: 33.33%; flex-basis: 33.33%; } } </style> </head> <body> <div class="container"> <div class="column"> <p>Column 1</p> </div> <div class="column"> <p>Column 2</p> </div> <div class="column"> <p>Column 3</p> </div> </div> </body> </html>In the above code, the
container class uses
display: flex to create a flexible container, and the internal ## The #column
class defines its own base width by setting the flex-basis
attribute. Conclusion:
The above is the detailed content of Explore the many forms of responsive layout. For more information, please follow other related articles on the PHP Chinese website!