CSS responsive design: adapt layout to different devices and screen sizes

CSS responsive design: adapting layouts to different devices and screen sizes, specific code examples are required

With the popularity of mobile devices and the emergence of different screen sizes, we There is an increasing need to consider layout adaptability on different devices in web design. CSS responsive design is a technology that enables web pages to display the best results on different devices. This article will introduce the implementation method of CSS responsive design through specific code examples.

1. Media queries

Media queries are a way in CSS to adapt to different devices and screen sizes. By using @media rules, you can apply different CSS styles based on the width, height, pixel ratio and other characteristics of the device screen.

/* 当设备宽度小于等于768px时应用以下样式 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    width: 90%;
  }
}

/* 当设备宽度大于768px时应用以下样式 */
@media (min-width: 769px) {
  body {
    font-size: 16px;
  }
  .container {
    width: 70%;
  }
}

In the above example, when the device width is less than or equal to 768px, the font size of the entire page will become 14px, and the width of the container is 90%; when the device width is greater than 768px, the font size will be 16px, The container width is 70%. Through media queries, we can apply different styles according to different device sizes to achieve responsive layout.

2. Flexible layout

CSS’s flexible layout is also a key technology of responsive design. With flex layout, an element can dynamically adjust its size and position based on the size of its parent element.

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.box {
  flex: 1;
}

In the above example, the .container element uses display: flex to create a flexible layout container, and the internal .box element Use flex: 1 to occupy the remaining space. In this way, no matter how the width of the container changes, the internal .box elements will automatically adjust their width, achieving responsiveness in the page layout.

3. Responsive design for images and media

Loading large-sized images and media on mobile devices will cause pages to load slowly and waste bandwidth. In order to improve the page loading speed and user experience, we can use the max-width property of CSS to implement responsive design for images and media.

img {
  max-width: 100%;
  height: auto;
}

In the above code, we set max-width to 100%, and the image will automatically adjust its size according to the width of the parent element while maintaining the aspect ratio. In this way, the picture will not exceed the boundaries of the parent container on different devices, ensuring the integrity of the page layout.

4. Adapt to different screen densities

On high-density devices, such as Retina displays, in order to ensure the clarity of text and images, we need to use high-resolution images and fonts. CSS provides suffixes such as @2x, which can load different resources on different screen densities.

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
  /* 高密度设备上加载高分辨率图片和字体 */
}

In the above code, we use media query functions such as -webkit-min-device-pixel-ratio to identify high-density devices and load high-resolution resources. This way we can ensure the best results across different screen densities.

Summary:
CSS responsive design is a layout technology that adapts to different devices and screen sizes. Through media queries, flexible layout, responsive design of images and media, and adapting to different screen densities, we can achieve the best display effect of the page on different devices. In actual development, we can choose different responsive design methods based on needs and user groups, and implement them through specific code examples.

The above is the detailed content of CSS responsive design: adapt layout to different devices and screen sizes. For more information, please follow other related articles on the PHP Chinese website!