a melhor aparencia possivel definindo o tamanho de fonte para cabecalhos (h1...h6), paragrafos (p), definindo o tamanho que divs e forms, imagens, etc...irao ocupar no documento.Ate ai tudo bem, vamos supor agora que neste ambiente de desenvolvimento a resolucao escolhida para o desenvolvimento seja 1152x864 pixels...note que um cabecalho desenvolvido para esta resolucao que tenha sua fonte setada para 18px nao ira ser exibido de maneira harmoniosa em um celular com resolucao de 320x480 pixels pelo contrario, as letras ficarao muito grandes na tela ocupando muito espaco e "empurrando" o restante do conteudo para baixo :(Para resolver isto surgiu entao a ideia de "design-responsivo" criando mais de uma sequencia de regras para o mesmo documento fazendo assim o layout receber a regra mais adequada a resolucao do aparelho que esta visualizando este documento (pagina).Como dito anteriormente hoje existem inumeras ferramentas para o desenvolvimento responsivo alem de muitas regras distintas, por hora nao ha/nao existe uma padronizacao o que existe sao conjuntos de regras.As mais conhecidas sao os frameworks, conjuntos de regras pre definidas em uma (ou varias) folhas de estilho aonde o desenvolvedor simplesmente deve montar seu layout utilizando tags de marcacao do framework que ele esta trabalhando para que esta estilizacoes e todos os elementos pre definidos por ela sejam chamados/incorporados ao seu documento.Existem dezenas de frameworks por ai, citarei apenas o mais utilizados. Quando falamos de framework para desenvolvimento responsivo o Bootstrap que foi desenvolvido pelo Twitter e hoje e gerenciado pela comunidade que se formou em volta dele no Github e o mais difundido.Mas alem deste temos o Foundation, o KickStart e varios outros e o melhor, sao Open Source ou seja, de codigo aberto e que podem ser utilizados por qualquer pessoa.Mas nem so de frameworks se faz um layout responsivo o desenvolvedor pode tambem criar suas proprias regras para aplicar a cada tipo de resolucao ou pelo menos as mais comuns :)Tudo bem, esta deve ser a parte aonde voce se pergunta mas como eu faco isso?!?Com css e claro :)E possivel fazer a chamada de regras distintas para o mesmo documento de inumeras formas. As mais usuais sao na chamada da folha de estilo no proprio documento html ou entao utilizando as propriedades media queries do css na propria folha de estilo...veremos abaixo como fazer isto.Para chamar folhas de estilo distintas no proprio documento html devemos intender o que sao media queries.Media Queries ou simplesmente "consulta de midia" sao parametros das regras de css3, atualmente o css3 esta sob construcao mas inumeras das suas regras ja estao aptas ao uso pois ja estao definidas e serao lancadas na versao final do css3.Esta consulta consiste em verificar o escopo da folha de estilo usando a verificacao do tipo de midia, largura, altura, cor, etc...que o dispositivo que esta visualizando o documento possui, fazendo assim a incorporacao da regra apropriada.Media queries possui sintaxe e operadores logicos, abaixo trago um exemplo e posteriormente iremos "desmembrar" este exemplo.No exemplo acima a atributo "link" do html indica ao navegador que deva procurar o documento fora do atual html.O atributo "rel=stylesheet" indica