CSS responsivo com refresh

[Superwagtel 1]

Olá pessoal, estou montando meu novo portfólio (Responsivo)

 

Minha ideia é desenvolver dois sites iguais

 

No primeiro o media query é:

 

@media screen and (min-width:1000px) { }

@media screen and (min-width:770px) and (max-width:999px){ }

 

E assim por diante até cobrir todas as telas possíveis.

 

No segundo site (que é igual ao 1º) mudo apenas os medias query:

 

@media only screen and(min-device-width:1000px) {}

@media only screen and (min-device-width:770px) and (max-device-width:999px){ }

 

E assim por diante.

 

A ideia é que quando uma empresa interessada em meu trabalho abra o site em um desktop,

ela possa redimensionar a tela para ver o CSS3 funcionando com o HTML5

 

 

Mas quando abrir o site de um mobile (qualquer um menor que 1000px) , o usuário seja redirecionado diretamente para o site 2

sem que eu tenha que criar um link:

 

Para melhor visualizar este site de seu mobile, clique aqui.

 

Por isto eu pergunto se existe algum media query que faça este refresh automaticamente?

 

 

[rikaschmitt 54]

por que você não cria um único site que se adapte a todas as resoluções?

[William Bruno 1501]

Má idéia. Isso é tão 1990.. ninguém mais faz sites com: "Para melhor visualizar", ou "redirect dependendo do dispositivo". Hoje em dia, esse tipo de coisa é considerado trabalho de amadores.

 

Não faça isso.

[André do Vale 76]

Eu tentei, mas não entendi o fundamento do porquê e pra quê fazer desta forma.

• São dois sites distintos, ou o mesmo site?
• São dois layouts distintos para dispositivos diferentes? Se sim, por que?
• É o mesmo site mas com mobile dedicado (sendo este também responsivo)? Esta última é plausível.

[guilomaker 31]

você realmente acha que essa e a melhor solução pra você? faça um único site que atende a todas resoluções.

[baguera13 5]

Isso é considerado Gambiarra, mas se você quiser fazer isso o site é seu e vc pode, rs

 

Identifica com javascript ou jquery o dispositivo a resolução e utiliza CSS's diferentes

 

pesquisa sobre: $( document ).ready()

 

mas como os parças falaram melhor fazer um que se adapte a tudo no fim da até menos trabalho.

[Superwagtel 1]

Legal galera, agradeço a força!

 

Mas, eu já criei um site que se adapta à todas as resoluções:

 

Este site é para apresentação em empresas (procuro por emprego) e ele é

todo auto-adaptável (layout flexível).

 

Mas está todo com por exemplo:

 

@media screen and (max-width:540px){ }

 

Sem o "device"

 

Então quando abre ele em um bobile, fica esquisito.

 

Por isto perguntei sobre algum refresh que direcionaria para o site que é responsivo mesmo.

 

Vou procurar em javaScript

 

E fico grato pela força

[André do Vale 76]

Como assim sem o 'device'? O @media é justamente para isto mesmo.

 

Na regra que você citou, tudo que estiver entre as chaves dela irá funcionar em telas e com uma largura máxima de 540px.

 

Sem javascript. Sem mágica. É pura tecnologia. :coolio:

 

Dê uma estudada: http://www.w3.org/TR/css3-mediaqueries/

[Superwagtel 1]

André Campos

 

Sem device:

 

@media screen and (max-width:540px) {...}

 

Com o device:

 

@media screen and (max-device-width:540px){...}

 

Eu reparei que a página (sem o device) quando aberta em um móbile, não funciona.

 

Mas tudo bem, estou tratando deste assunto procurando uma solução junto ao javascript

 

Por aqui fica a minha gratidão à todos pela força.

[André do Vale 76]

É o contrário.

device-max-width

Mas o device- é opcional. Logo, 'max-width' funciona.

 

Lembre-se de aplicar a metatag viewport no seu HTML, como por exemplo:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

[Superwagtel 1]

Isto mesmo André, estou aprendendo ainda o Responsivo e pesquisando na web descobri o "viewport"

 

Daí então desisti deste tópico.

 

Quando aprendi o Viewport, minha pergunta neste tópico perdeu sua funcionalidade.