Introductory tutorial and skill sharing on responsive design based on CSS3

Introduction tutorial and skill sharing of responsive design based on CSS3

In today's mobile Internet era, responsive design has become one of the essential skills for web design. By using CSS3, you can easily create web page layouts that adapt to different screen sizes and devices. This article will lead you to get started with responsive design and share some practical tips and code examples.

1. Media queries

Media queries are the basis of responsive design. They can match different CSS rules according to the characteristics of the device and the screen size. By using @media rules, we can define styles for different screen sizes.

@media screen and (max-width: 768px) {
/ Style applied when the maximum width is 768px/
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
/ Styles applied when width is between 769px and 1024px/
}

@media screen and (min-width: 1025px) {
/ Styles applied when the minimum width is greater than 1024px/
}

Through media queries, we can set different Properties such as layout, font size, number of columns, etc. under the size screen. In this way, good display effects can be achieved on different devices.

2. Fluid layout

Fluid layout is a common layout method of responsive design. By setting the width of an element as a percentage, the page can adapt to different devices.

.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
}

In the above code example , sets a maximum width for the container and aligns it in the center. In this way, no matter which device the page is opened on, the container will automatically adjust according to the width of the device.

3. Flexible pictures

Pictures are also one of the important elements in web design. In order to make the image adaptive on devices of different sizes, you can use the CSS3 background-image attribute and background-size attribute.

.image {
background-image: url('image.jpg');
background-size: cover;
background-position: center;
}

In the above example, the image is set as the background image, and through the cover and center attributes, it can be adaptive and centered on devices of different sizes.

4. Hiding and displaying elements

When designing a responsive web page, sometimes it is necessary to hide or display certain elements according to the device size. You can use the CSS3 display attribute to achieve this function.

@media screen and (max-width: 768px) {
.element {

display: none;

}
}

In the above code example, when the device width When smaller than 768px, the element will be hidden.

5. Use flexbox layout

Flexbox is a new layout method added to CSS3, which can more easily implement responsive design of web pages. Adaptive layout can be achieved by setting the flex attribute on containers and child elements.

.container {
display: flex;
justify-content: center;
align-items: center;
}

In the above code example, the container Set it to flex layout and align its child elements left and right in the center.

Summary

This article introduces the introductory tutorial and common techniques of responsive design based on CSS3. By using media queries, fluid layouts, flex images, hidden and displayed elements, and flexbox layouts, you can easily create web page layouts that adapt to different screen sizes and devices. I hope this article can help everyone get started with responsive design.

Reference materials:

• https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design

The above is the detailed content of Introductory tutorial and skill sharing on responsive design based on CSS3. For more information, please follow other related articles on the PHP Chinese website!