Os três pilares básicos do RWD (Responsive Web Design, que abrasileiramos para Design Responsivo) são;
1. Fundação Flexível (Fluid grids)
Para que o seu site possa se adaptar a múltiplos dispositivos é preciso colocar um pouco de lado os pixels. Note bem: colocar de lado, não jogar fora! Você ainda vai utilizá-los para definir alturas fixas e para definir, se for determinado no layout, um container inicial com uma largura máxima. As unidades de medidas mais utilizadas em RWD são % e EM.
2. Imagens adaptáveis (Adaptive images)
Seguindo o prmeiro pilar Fundação Flexível (Fluid grids), quando trabalhamos com porcentagens precisamos garantir que as imagens não se distorçam, desta forma a largura máxima (max-width) das imagens deve ser definida em porcentagem.
img {
max-width: 100%;
}
Isto significa que o tamanho final da imagem no browser nunca vai ultrapassar o tamanho original dela. Mas, para isto funcionar, é necessário sempre envelopar as imagens em um container. Pode ser um figure, uma div, etc.
3. Consulta de mídia (Media queries)
O terceiro e último pilar do RWD é a consulta de mídia ou media queries. Este rescurso do CSS3 serve para identificar qual é o tipo, resolução e densidade do dispositivo.
Para isto basta utilizar a regra @media combinada com parâmetros como min-width, max-width, min-height, max-height, aspect ratio, etc. e operadores como and, only e not.
Vamos supor que você queira trabalhar apenas com telas de largura máxima 1024px. O media querie ficaria assim:
@media screen and (max-width: 1024px) {
/*estilos*/
}