Manipulando - Media Queries

É possível, mas não é considerada uma boa prática. Você tem sua hospedagem que carrega no domínio principal (www.meusite.com.br) um conteúdo de index.html e css e em outro subdomínio (m.meusite.com.br) pastas com outros index.html e css diferentes. Você faz o redirecionamento aplicando uma condição através de um código Javascript ou Jquery que irá detectar o tipo de dispositivo que você está usando para acesso.

Se quiser saber mais sobre o assunto pesquise por 'Redirecionamento para versão mobile do site'.

Espero ter ajudado :)

Oi Igor,

Voce ta pensando no mesmo HTML (index.html) e apenas variar o CSS, isso?

Dá pra fazer sim. Como vc disse, vai dar bem mais trabalho implementar o layout 2x. Mas é possivel, e talvez faça sentido pro seu caso.

E na verdade, quando falamos de Desktop/Mobile, estamos falando de tamanhos de telas diferentes. O que pode nao ser verdade sempre (um desktop com janela pequena pode ter o mesmo tamanho de um mobile por exemplo).

Mas vc pode fazer isso direto na importacao do CSS:

<link rel=stylesheet href=desktop.css media="(min-width: 800px)">
<link rel=stylesheet href=mobile.css media="not all and (min-width: 800px)">

(usando o not all and pra negar uma media query)

Ola Gabriela.. Obrigado por sua resposta.

Creio que seria uma solução também para meu desejado. Vou procurar mais sobre o assunto "Redirecionamento para versão mobile do site" que você falou.

Obrigado.

Sérgio... Obrigado pela resposta.

Esta solução que você me forneceu seria para aplicar 1(um) .css diferente um do outro.

Uma pagina Index.html e 2 CSS diferentes. 1 para mobile outro para desktop.

E no caso extra de precisarmos ter realmente 2 sites projetados diferentes? (Devido a 1 ter sido feito em pixels)

Seria a solução que a Gabriela passou?

No caso...

1 html e CSS para - Desktop 1 html e CSS para Mobile

Como essa Media Query ficaria? Ficou mais claro? Abraços

Ah perfeito. É bem por essa linha que a Gabriela falou mesmo. Teremos 2 sites implementados de forma diferentes, totalmente independentes.

Aí temos duas possibilidades: colocar o site principal em www.site.com e subir o outro num subdominio - em geral pessoal usa m.site.com mas pode ser qualquer um.

Ou fazer tudo no www.site.com e fazer seu servidor resolver qual versão deve mandar com base no navegador do usuário.

Pra você entender na pratica: se você abrir o UOL no celular ou no Desktop sempre vai ver www.uol.com.br mas são 2 sites completamente diferentes. Quem resolveu isso foi o servidor deles, enviando o HTML de acordo com o tipo de usuário.

Já se voce abrir o Facebook no computador vai usar www.facebook.com mas se abrir no celular (no navegador) vai usar o m.facebook.com. Ambos sites diferentes mas em subdominios diferentes.

Nesse caso de subdominios diferentes, o que o servidor faz tambem é redirecionar o usuario automaticamente. Entao se eu digito www.facebook.com no celular ele percebe que estou no celular e me redireciona automticamente pra m.facebook.com.

Em ambas as tecnicas vc precisa de um jeito de detectar se o navegador é mobile ou desktop (seja pra redirecionar, seja pra enviar o HTML correto). E é ai que mora o perigo. É bem dificil fazer isso com 100% de certeza, por isso o apelo do design responsivo. Mas dá pra chutar com certa certeza.

O mais comum é você, no servidor, olhar pro cabeçalho HTTP User-Agent e identificar o tipo de browser lá (em geral os browsers moveis tem a palavra Mobile no user-agent ou o nome do sistema - Android, iOS etc).

Esse site aqui possui uma regex bem grande num if gigante pra detectar de forma simples: http://detectmobilebrowsers.com/ (tem versões pra todo tipo de linguagem de servidor)

Muito Obrigado! Super esclarecido.