mobile-first and desktop-first have their own applicable scenarios, and the selection needs to be based on project requirements. 1. mobile-first first writes the mobile style, and then adapts to the large screen through min-width media query, which is suitable for mobile phone-first projects, such as e-commerce front desk; 2. desktop-first is designed for the desktop first, and uses max-width media query to adapt to the small screen, which is suitable for desktop-first products such as background management systems; 3. The core difference between the two is that the media query directions are different. The former expands from small screen to large screen, while the latter shrinks from large screen to small screen; 4. In either way, you need to add a viewport meta tag to ensure normal display on the mobile side; 5. mobile-first is conducive to performance optimization and component development, and desktop-first debugging is more intuitive but it is easy to ignore the details of the small screen; the final choice should be comprehensively determined based on user access habits, product types and team development preferences.

When doing responsive design, many people are puzzled whether to start from mobile (mobile-first) or desktop (desktop-first). In fact, these two methods have their own applicable scenarios, and you will get twice the result with half the effort if you choose the right one.

What are mobile-first and desktop-first?

Simply put, mobile-first first writes the style of the mobile terminal, and then gradually adapts to a larger screen through media query; while desktop-first is the other way around, first designed for the desktop, and then uses media query to process small-screen devices.

For example, you write a basic style and add @media (min-width: 768px) to adjust the layout above the tablet. This is a typical mobile-first. If you write a style suitable for large screens from the beginning, and then use @media (max-width: 767px) to modify the performance of small screens, that is desktop-first.

How to choose? Depend on project requirements

• If most of your users are accessing from your phone, or the product itself emphasizes mobile-first experience, then you should naturally use mobile-first.
• If it is an internal system, backend management page, or a product specially created for desktop users, desktop-first may be more suitable.

To give a practical example: the front desk page of an e-commerce website is definitely given priority to mobile browsing, so it is more suitable for mobile-first; for a data analysis platform, users basically sit in front of a computer to operate, which is more suitable for desktop-first.

What is the difference in implementation?

The core difference between the two is the different directions of media query:

Common ways to write Mobile-first:

 /* Basic style is suitable for small screen*/
.container {
  width: 100%;
}

/* Increase the screen adaptation*/
@media (min-width: 768px) {
  .container {
    width: 80%;
    margin: 0 auto;
  }
}

Common writing of Desktop-first:

 /* Basic style is suitable for large screen*/
.container {
  width: 80%;
  margin: 0 auto;
}

/* Small screen adapter*/
@media (max-width: 767px) {
  .container {
    width: 100%;
  }
}

Note: No matter which method, you must add <meta name="viewport" content="width=device-width, initial-scale=1"> to the HTML, otherwise there will be problems with the display on the mobile side.

Development habits and maintenance costs

• The advantage of mobile-first is that the lightest style is loaded by default, which is conducive to performance optimization and is in line with modern web development trends.
• desktop-first may be more intuitive when debugging, because you can see the complete layout structure at the beginning, but it is easy to ignore the details of the small screen adaptation.

In addition, in component development, such as using CSS-in-JS or tools like Tailwind, mobile-first is easier to unify logic and easier to expand.

Basically that's it. There are no absolute advantages and disadvantages in the two methods. The key is to make choices based on project type, target equipment and team habits.

The above is the detailed content of Implementing responsive design approaches: mobile-first vs desktop-first in css. For more information, please follow other related articles on the PHP Chinese website!