design responsivo para sites usando css - css

Eu estou escrevendo css para alguns sites que devem ser responsivos. Eu sou novo no css e não sei muito das técnicas responsivas. Eu dividi meu código css em três partes.

1. Desktop: todos os estilos universais
2. Tablets: @media (min-width: 768px) e (max-width: 991px) {my styles}
3. Celulares: @media (min-width: 320px) e (max-width: 480px) {my styles}

Será totalmente responsivo e suporte Todos dispositivos padrão ou eu tenho que fazer mais algumas mudanças? Aqui TODOS significa literalmente todos os dispositivos.

Respostas:

Você não deve deixar espaços entre 481 e 766 e entre 0 e 319 px. Isso não é realmente responsivo.

@media screen and (max-device-width:480px){ // styles for mobile}
@media screen and (max-device-width:780px){ // styles for tablets}
@media screen and (min-device-width:781px){ // styles for desktop}

EDITAR Existem wearables inferiores a 319 px. Exemplo:

/* ----------- Moto 360 Watch ----------- */
@media
(max-device-width: 218px)
and (max-device-height: 281px) {

}

Deve haver alguns dispositivos entre 481 e 766.

Se você acha responsivo "s simples, me sinto mal por seu filho. Temos 99 viewports, mas o iPhone é apenas um.

Aqui está a lista de Consultas de mídia para dispositivos padrão

O que quase todo mundo errou é que a respostaO design deve ser feito com base em alguns pontos de interrupção predefinidos. Deve definir o seu conteúdo, não a tela do seu visitante. Se houver 10 pontos de interrupção, há algo definitivamente errado com a estrutura do site. Menos consultas de mídia = melhor. Comece a partir daí e conclua a estrutura perfeita para o seu conteúdo em QUALQUER tela.