Colocando em prática, temos uma pagina em HTML 5 (pode ser HTML 4 também ou XHTML) com um link teste.css e ná pagina teste.html, teremos uma div id teste, entao queremos que quando essa página for visualizado por um Celular ou Smartphone tenha um tamanho; quando for um Tablet ou um NetBook tenha outro tamanho(maior) e quando for um PC ou uma TV tenha um novo tamanho(ainda maior), então utilizamos as Medias Queries em CSS para essa façanha, segue o arquivo teste.html e teste.css pra você entender melhor como funciona, veirifque as imagens(clique nelas para ampliar) para ver os testes que fiz diminuindo o tamanho da janela do Navegdor para verificar se realmente funciona, se a div id teste tivesse um único tamanho, o mesmo ficaria com a mesma resolução.
Div Teste
</div><!--TESTE-->
/*teste.css*/
/* começamos com o tamanho minimo de 200 px e maximo de 250 px, infromando ter 100% dos 250px, Configurada para CELULARES E SMARTPHONES */
/* se a tela for maior que 600 pixels, a div teste passa a ter um valor mínimo de 600 pixels e maximo de 650 pixels - tamanho para TABLETS E NETBOOKS */
/* se a tela for maior que 900 pixels, a div teste passa a ter um valor mínimo de 1200 pixels - tamanho para TVs e PCs */
Verifique as imagens pra ver como resultará
Primeira Configuração para Celulares e Smartphones
Segunda Configuração para Tablets e NetBooks
Terceira Configuração para PCs e TVs
Verifique que usamos a propriedade __@media screen __and(operador booleano) para informar se o tamanho tiver no minimo tal, tais propriedade passarão a ter tais valores, lembrando que as Media Queries devem estar depois pois a leitura do código começa de cima e quem for definido por último passará ater o último valor.