Explore the many forms of responsive layout-C++-php.cn

Explore the many forms of responsive layout

WBOY

Release： 2024-02-24 19:30:09

Original

511 people have browsed it

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>

Copy after login

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.

2. Adaptive Layout

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>

Copy after login

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.

3. Flex Layout

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>

Copy after login

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:

This article introduces the three common types of responsive layout: fluid layout, adaptive layout and elastic layout, and provides specific code examples. By understanding these layout types and corresponding code implementations, readers can better apply responsive layout to adapt to different screen sizes and provide better user experience and accessibility. In actual projects, you can choose the appropriate layout type according to specific needs, and combine media query and other technologies to achieve more complex responsive layout effects.

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!