O Mobile First é a abordagem que você cria telas primeiro um layout para celular e depois ajustar a tela para dispositivos maiores usando “media queries” do CSS -Cascading Style Sheets -.
Seguindo a sequência: “smartphone”, depois “tablet” e por último “desktop” ou “large desktop”. As resoluções de telas e tamanho são diferentes em vários modelos dos dispositivos.
Temos os breakpoints -são pontos de referências dos tamanhos de telas em cada layout- Desse modo costuma-se dividir em 3 ou 4 breakpoints para um desenvolvimento de layout utilizando “Grid System”.
Usa-se 4 breakpoints numa folha CSS para smartphone, tablets, desktop e large desktop são respectivamente: 480px, 768px, 992px , 1200px. Lembrando que não é uma definição rígida e você poderá alterar os valores para manter seus resultados satisfatórios.