Include de CSS externo em folha de estilo usanddo condicionais PHP

[FelipeSAMA 1]

Boa tarde brothers!

 

Venho com uma pequena dúvida concernente ao include.php() dentro de uma folha de estilos css.

Pesquisei e descobri que é possível que o servidor interprete seu arquivo css como um arquivo php.

 

Queria saber se é possível carregar uma folha de estilo diferente de acordo com a resolução de tela do usuário, sem usar javascript.

Eu nem manjo muito de código, mas tentei fazer com o próprio css e não deu certo.

/* FOLHA DE ESTILOS DE ACORDO COM A RESOLUÇÃO DO USUÁRIO */

/* Desktops e Laptops ----------- */
@media only screen
and (min-width : 1024px) and (max-width : 2048px) { 
	@import url('style.css');
}

/* Ipads e Tablets ----------- */
@media only screen
and (min-width : 481px) and (max-width : 1024px) { 
	@import url('style-tablet.css');
}

/* Celulares e Smarthphones ----------- */
@media only screen
and (min-width : 1px) and (max-width : 480px) { 
	@import url('style-mobile.css');
}

Infelizmente não deu certo. teria algum jeito de fazer e sem usar javascript?

 

 

Obrigado....

[Marlon Pacheco 132]

O que exatamente não deu certo?

Você poderia criar um único CSS e tratar as media queries direto nele.

[FelipeSAMA 1]

Bom, vamos lá, eu criei 3 foolhas de estilos diferentes. uma pra cada tipo de tela (celular, tablet e desktop). porém comecei fazendo sem muita noção.

 

Olhando o site do celular e do tablet fica perfeito, no desktop também, só tem um problema: em tela cheia funciona direitinho, mas se redimensionar diminuindo o tamanho, ele perde totalmente o estilo... fica tudo branco.

 

Isso acontece porque eu configurei como (min-width : 1024px) a folha de estilos pra desktop... se eu redimensionar o browser pra menos de 1024px perde totalmente o estilo... e ainda pior, ele nao carrega o estilo corresponde ao novo tamanho, que seria o tablet.css ou então o mobile.css

 

Com isso eu tentei fazer aquelas media queryes acima, pra ver se funcionou.. não carega nada...

 

Enteneu?

 

Quero saber.. Existe algum jeito de carregar uma folha de estilo dependendo da tela do usuário ou você acpnselha fazer uma única folha?

[Marlon Pacheco 132]

Eu aconselho a fazer somente uma.

Eu costumo trabalhar somente com o max-width, partindo do princípio 'mobile-first'.

Recomendo fortemente esse artigo: http://sergiolopes.org/media-queries-conteudo/

[FelipeSAMA 1]

Obrigado pela ajuda, eu já imaginava que era em porcentagem e EM. Só uma dúvida, você usa grid system? Gryd system é só na hora de desenhar o mockup do site, e usar as mesmas medidas, ou tem algo haver com plugin de css?

[Marlon Pacheco 132]

Grid System é um arquivo CSS com as definições de colunas.

Não costumo usar, mas recomendaria o http://purecss.io/