Conceitos básicos de design responsivo

O design responsivo é um conjunto de técnicas de CSS e JS para que o site se adapte automaticamente à largura da tela. Há vários conceitos que exploraremos nos cursos, entre eles:

• Design Responsivo, que responde de forma gradual à mudança da área visível do site, enquanto o Design Adaptativo responde de forma brusca.
• Fluído é quando o site se adapta à mudança na quantidade de conteúdo, já o Estático pode causar problemas com elementos se sobrepondo aos outros.
• Unidades Relativas são aquelas que mudam de acordo com as dimensões da tela onde o site está sendo exibido, já as Unidades Estáticas mantêm as mesmas dimensões independentemente das dimensões da área visível.
• Breakpoints são valores limites de dimensões que determinam como os elementos da página serão organizados.
• Valores mínimos e máximos, como o próprio nome diz, são dimensões mínimas ou máximas que um elemento pode assumir dentro da sua tela.
• Elementos aninhados (nested) são aqueles que estão interligados de forma que se você mover a posição de um, os outros também serão movidos.
• Fontes de sistema são aquelas que vêm inclusas no Sistema Operacional do usuário e Webfonts são aquelas que podem ser obtidas através da internet.
• Imagens são representadas em pixels e o redimensionamento delas causa perda de qualidade visual, os Vetores são representados por fórmulas matemáticas e podem ser redimensionados ou deformados sem nenhum tipo de perda de qualidade.