CSS responsive card design: create card styles that adapt to different devices

CSS responsive card design: Making card styles that adapt to different devices requires specific code examples

In modern web design, responsive design has become a must Technical points of preparation. Since the screen sizes and resolutions of different devices are different, in order to display well on all devices, we need to adapt the web page.

Card layout is a common web page layout method. It can provide a clear sense of block when displaying information, and is very suitable for displaying images and text content. In this article, we will share a simple and elegant CSS responsive card design method and provide corresponding code examples.

First, we need a basic HTML structure to display the card content. The code is as follows:

<div class="card">
  <img src="image.jpg" alt="Card Image">
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p class="card-text">Card description goes here.</p>
    <a href="#" class="btn">Read More</a>
  </div>
</div>

Next, we need to write CSS styles to make the appearance of the card. The code is as follows:

.card {
  width: 300px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 10px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.card img {
  width: 100%;
  height: auto;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.card .card-body {
  padding: 20px;
}

.card .card-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.card .card-text {
  font-size: 14px;
  color: #777;
}

.card .btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .card {
    width: 100%;
    margin: 10px 0;
  }
}

The .card class in the above code defines the basic style of the card, including background color, border rounded corners, shadow effects, etc. The .card img class defines the image style in the card so that it can adapt to the width of the card. .card .card-body class defines the style of the content area in the card, including the styles of padding, title and description text, etc. .card .btn class defines the button style in the card.

Next, in the @media query, we adjusted the style for devices with a width of less than 768px, so that the card width becomes 100%, adapting to small screen devices such as mobile phones and tablets.

With the above code, we can easily create a simple responsive card style. You can adjust the style and add more content and effects according to actual needs.

Summary:
CSS responsive card design is an effective method to realize web page layout adapting to different devices. By using CSS and media queries, we can easily adjust the layout and style of a web page so that it displays well on a variety of devices. I hope the above content has helped you understand and apply responsive card design.

The above is the detailed content of CSS responsive card design: create card styles that adapt to different devices. For more information, please follow other related articles on the PHP Chinese website!