The key to responsive design is to reasonably divide breakpoints and adjust the styles in a targeted manner. 1. Understand the basic structure of media query, use @media plus conditional judgment, such as setting styles according to screen width; multiple conditions can be combined to adapt to different devices. 2. Setting reasonable breakpoints should be based on content and design drafts. It is recommended to gradually adapt to large screens starting from the mobile terminal. Common reference values ??include vertical screen max-width: 767px for mobile phones, vertical screens for tablets, and above 1023px for desktop browsers. 3. To modify the key styles in a targeted manner, you only need to adjust the parts that really need to be changed, such as layout switching, font size, image button size, element display and hidden. 4. Use the mobile-first strategy to write mobile styles first and then gradually expand them to improve loading speed and maintenance efficiency, and pay attention to the style writing order: General → Mobile → Desktop. Mastering these key points can achieve a simple and practical responsive design.

The key to using CSS media query for responsive design is not how complicated it is, but how to break points and how to adjust the style. To put it directly, the key point is: reasonably divide the screen range and adjust the layout and element performance in a targeted manner, so that the page looks suitable on different devices.

1. Understand the basic structure of media queries

The syntax of media query is actually quite simple, the core is to add conditional judgments after @media . The most common usage is to set different styles according to the screen width:

 @media (max-width: 768px) {
  /* Mobile style*/
}

You can also add multiple conditions at the same time, such as judging the maximum and minimum widths at the same time:

 @media (min-width: 769px) and (max-width: 1024px) {
  /* Flat style*/
}

Small suggestions: Don’t write too many breakpoints at the beginning, start with the mobile terminal and gradually adapt to a larger screen, which makes it easier to control.

2. Set reasonable breakpoints

Breakpoints are not determined casually, they should be decided based on your content and design draft. Several commonly used reference values ??include:

• Mobile phone vertical screen : max-width: 767px
• Tablet vertical screen : min-width: 768px to max-width: 1023px
• Desktop browser : min-width: 1024px

However, the more recommended method is: first write the mobile style, then gradually enlarge the browser window, and add a breakpoint when you see the layout "problem".

for example:

• When the text line is too long, it affects reading
• The picture layout is inconsistent
• Buttons become too small and hard to click

At this time, adding a media query to adjust will be more meaningful than sticking to a few fixed sizes.

3. Targeted modification of key styles

There is no need to rewrite all styles in media queries, just change the parts that really need to be changed. Several common types of adjustments include:

• Layout changes : For example, change from flex to grid, or switch the position of the sidebar
• Font size : Appropriately increase fonts on large screens to improve readability
• Image and button size : Avoid being pressed too small or deformed on small screens
• Hide/show certain elements : For example, the mobile terminal can close the navigation menu and use the hamburger icon instead

For example, I want to turn the navigation bar into a vertical arrangement on a small screen:

 @media (max-width: 767px) {
  .nav {
    flex-direction: column;
  }
}

There are not many changes in this way, but the experience is significantly improved.

4. Use mobile-first strategies to be more efficient

The so-called "mobile first" means writing the style that is suitable for the phone first, and then adding enhanced styles to the larger screen through media queries. This method has two benefits:

• The phone loads faster because you don't need to download extra desktop styles
• It is easier to maintain logic, expand step by step from small to large

It is also important to pay attention to the order when writing: the general style is placed at the front, the mobile dedicated style is followed by the desktop overlay style.

Basically that's it. The key to making good use of media inquiries is not to have many, but to be precise. As long as you grasp the two points of content adaptability and user experience, you can make a simple and practical responsive design.

The above is the detailed content of Strategies for building responsive designs with CSS Media Queries. For more information, please follow other related articles on the PHP Chinese website!