Primeiro, obrigado a todos pelas respostas e orientações preciosas, com certeza ajudaram!
Permita-me adicionar minha conclusão:
Praticamente, segmentar a resolução da tela do celular não é um bom UX, a resolução é muito alta para a tela pequena, as fontes serão pequenas demais para ler, os ícones serão pequenos demais para clicar etc.
Portanto, é melhor criar o design com base no tamanho real da janela de visualização! Dessa forma, é baseado no que um usuário pode ver e sentir.
Para conseguir isso na vida real, devemos adicionar uma metatag de largura de viewport dentro <head>
dos documentos HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Isso indica ao navegador para renderizar a página com uma largura igual à largura da tela, para garantir que a largura da página HTML seja igual à largura da tela em termos de pixels. O desenvolvimento pode ser facilmente planejado com consultas de mídia direcionadas a diferentes tamanhos de viewport para dispositivos móveis (que são próximos um do outro) e produzirá elementos visualmente mais claros.
Por favor corrija-me se eu estiver errado.
Atualizar:
Com base na minha humilde experiência, sugiro as etapas abaixo para um melhor desenvolvimento do site responsivo:
1- use a meta de view-port (veja a parte superior), também aumentará o ranking da página nos resultados de pesquisa para dispositivos móveis, de acordo com o google.
http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html
Após o teste, parece que a adição da meta de porta de visualização sozinha dará notas ao seu site nas ferramentas de teste para dispositivos móveis
https://developers.google.com/speed/pagespeed/insights/
2- você pode considerar a possibilidade de aplicar a abordagem para dispositivos móveis, é sempre mais fácil aumentar do que diminuir (depende da complexidade do seu site)
3- Aplique um sistema responsivo híbrido, uma mistura entre adaptativo (fluido) e responsivo (css media-queries), para fazer isso:
Use porcentagem para largura e margens horizontais / preenchimentos. (as margens verticais podem ter um tamanho fixo de pixels, se você preferir. a rolagem não é mais um problema)
Use em para fontes, desta maneira, quando você alterar o tamanho da fonte para o corpo (ou html) na consulta de mídia, todos os elementos CSS se adaptarão a esse tamanho, usando px o tornará um pesadelo, porque você precisará ir para cada classe CSS e altere o tamanho da fonte.
Flutue divs para a esquerda, para que eles se alinhem corretamente ao espaço disponível (ou à direita, se o seu design exigir).
4- Defina os pontos de interrupção , use uma ferramenta de teste responsiva para isso. Eu uso a exibição de design responsivo do firefox, basta diminuir a largura até chegar ao ponto em que o site está com defeito (por exemplo, 500px), que é um ponto de interrupção.
Aplique as novas regras CSS dentro da consulta de mídia para esse ponto de interrupção (500px),
5- lembre-se de preservar a qualidade e a clareza do site! se os elementos ficarem claros e muito próximos um do outro, expanda a largura dos elementos para ocupar a largura do contêiner e faça com que eles sejam empilhados verticalmente,
e lembre-se de fornecer um novo tamanho de fonte para o corpo, para que todos os subelementos herdem uma fonte maior e se tornem mais legíveis.
6- Repita o teste responsivo e defina seu segundo ponto de interrupção. Provavelmente, você não terá muitos pontos de interrupção porque estamos usando o design de fluidos aqui e é aí que o uso de porcentagens trará retorno!
Eu trabalhei em um grande site com elementos de design pesados antes e isso exigia apenas 2 consultas de mídia :)
Espero que ajude