To write responsive CSS media queries, the key is to set breakpoints around the content and adopt a mobile-first strategy. 1. You should not blindly use common breakpoints such as 768px and 992px, but should decide the breakpoints based on when the content layout becomes crowded; 2. It is recommended to adopt the mobile priority principle, first define the mobile style, and then adapt it up through min-width to avoid loading unnecessary resources; 3. Media queries are not limited to screen width, but can also be judged based on characteristics such as resolution, horizontal and vertical screens, dark modes, etc., but excessive complexity should be avoided; 4. In practice, the number of breakpoints should be controlled to be within 3 to 5, unified naming of variables is convenient for collaboration, and it is necessary to test on real devices; 5. Finally, don’t forget to add a viewport meta tag to HTML to ensure that media queries take effect on the mobile side.

The key to writing responsive CSS media queries is to understand the logic of layout changes and the actual performance of device characteristics. Don’t just stack breakpoints, but design them around the content itself.

Why not all devices use 768px and 992px?

Many people copy and paste common breakpoints as soon as they come up: for example, the numbers 768, 992, and 1200. But these values ??are actually just a rough correspondence between "tablets" and "desktops" and are not necessarily suitable for your content.

For example, you have a paragraph of text on your page, and the two columns are laid out on the small screen and it will appear crowded. At this time, you should decide when to change the layout based on the comfort of the content itself , rather than depending on the size of the equipment.

• You might as well narrow the window in your browser first to see which width you are typing begins to become ugly
• That point is where you should add media inquiries

The advantage of this is that even if new devices appear, the style will not be messed up as long as the content is properly adapted.

Mobile or desktop first? Choose the right direction and achieve twice the result with half the effort

The mainstream approach now is to "mobile first", that is, write the mobile style first, and then enhance the experience on a larger screen. This is in line with the trend of access to most websites and is easier to control load performance.

If you start from the desktop, you may accidentally load a bunch of styles or images to the phone user that you don't need at all.

It is also very simple to use:

• The default style is written on the mobile terminal
• Add larger screen adaptations with min-width
• Try to avoid max-width nesting too many layers (it is easy to be confused)

For example:

 /* Default mobile style*/
.container {
  padding: 10px;
}

/* Adjust on medium screen*/
@media (min-width: 768px) {
  .container {
    padding: 20px;
  }
}

Media queries are not just width, but also these can be used

In addition to screen width, you can also detect other features:

• Resolution : High DPI screens can use clearer pictures

   @media (min-resolution: 2dppx)

• Horizontal and vertical screen switching : optimized for mobile phone rotation

   @media (orientation: landscape)

• Dark Mode Support : Provides adaptation for dark themes

   @media (prefers-color-scheme: dark)

These conditions can be used in combination, but be careful not to be too complicated. One suggestion is: introduce these extra judgments only when they are really needed.

Tips for writing media inquiries, don't ignore these details

• Don't break points frequently : It's enough to have 3 to 5 main break points for a project, too many will be difficult to maintain.
• The naming should be unified : for example, use $sm , $md , and $lg to manage variables to facilitate teamwork
• Testing must be performed on real devices : Sometimes the simulator shows no problem, but the real machine makes an error
• Avoid duplicate code : You can define common styles outside media queries to reduce redundancy

Also, remember to add the viewport meta tag in <head> of HTML:

 <meta name="viewport" content="width=device-width, initial-scale=1">

Without this, many media queries will not take effect on mobile phones.

Basically, it is not complicated to write media queries, but it is easy to ignore content priority and breakpoint rationality. Set breakpoints naturally according to the content stream and cooperate with the mobile-first strategy to make a stable and flexible responsive design.

The above is the detailed content of Writing effective media queries for responsive css design. For more information, please follow other related articles on the PHP Chinese website!