Created
May 19, 2012 20:03
-
-
Save claudiosanches/2732241 to your computer and use it in GitHub Desktop.
Layout Responsivo #01: Introdução
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Exemplo de Media Types</title> | |
| <!-- todos os dispositivos --> | |
| <link href="estilos.css" rel="stylesheet" type="text/css" media="all" /> | |
| <!-- monitores e com largura máxima de 600px (por exemplo tablets) --> | |
| <link href="estilo1.css" rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" /> | |
| <!-- apenas para monitores coloridos --> | |
| <link href="estilo2.css" rel="stylesheet" type="text/css" media="only screen and (color)" /> | |
| <!-- não aparece em monitores coloridos --> | |
| <link href="estilo3.css" rel="stylesheet" type="text/css" media="screen and (not color)" /> | |
| <!-- para dispositivos que não são monitores e são coloridos --> | |
| <link href="estilo4.css" rel="stylesheet" type="text/css" media="not screen and (color)" /> | |
| <!-- apenas monitores widescreen --> | |
| <link href="estilo4.css" rel="stylesheet" type="text/css" media="screen and (only device-aspect-ratio: 16/9)" /> | |
| <!-- impressão --> | |
| <link href="estilos-impressao.css" rel="stylesheet" type="text/css" media="print" /> | |
| </head> | |
| <body> | |
| <!-- Conteúdo do site --> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Exemplo de Media Types</title> | |
| <style type="text/css"> | |
| /* Exemplo utilizando @import para monitores com largura máxima de 600px */ | |
| @import url(estilos1.css) screen and (max-width: 600px); | |
| /* Exemplo utilizando o css diretamente na página ou folha de estilos para monitores com largura máxima de 400px */ | |
| @media screen and (max-width: 400px) { | |
| /* Estilos aqui */ | |
| } | |
| /* Estilos para impressão com no mínimo 300dpi */ | |
| @media print and (min-resolution: 300dpi) { | |
| /* Estilos de impressão aqui */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Conteúdo do site --> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Exemplo de Media Types</title> | |
| <!-- todos os dispositivos --> | |
| <link href="estilos.css" rel="stylesheet" type="text/css" media="all" /> | |
| <!-- dispositivos com largura máxima de 800px (por exemplo tablets) --> | |
| <link href="estilo-tablets.css" rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" /> | |
| <!-- dispositivos com largura máxima de 320px (por exemplo smartphones) --> | |
| <link href="estilo-smartphones.css" rel="stylesheet" type="text/css" media="screen and (max-width:320px)" /> | |
| <!-- dispositivos monocromaticos (preto e branco) --> | |
| <link href="estilo-monocromatico.css" rel="stylesheet" type="text/css" media="screen and (monochrome)" /> | |
| <!-- monitores com aspecto 16/9 (widescreen) --> | |
| <link href="estilo-monocromatico.css" rel="stylesheet" type="text/css" media="screen and (device-aspect-ratio: 16/9)" /> | |
| </head> | |
| <body> | |
| <!-- Conteúdo do site --> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media screen { | |
| /* Estilos para monitores aqui */ | |
| } | |
| @media print { | |
| /* Estilos para impressão aqui */ | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Exemplo de Media Types</title> | |
| <style type="text/css"> | |
| @import url("estilos.css") screen; | |
| @import url("estilos-impressao.css") print; | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Conteúdo do site --> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Exemplo de Media Types</title> | |
| <link href="estilos.css" rel="stylesheet" type="text/css" media="screen" /> | |
| <link href="estilos-impressao.css" rel="stylesheet" type="text/css" media="print" /> | |
| </head> | |
| <body> | |
| <!-- Conteúdo do site --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Eu gostaria de colocar recursos no site, como colocar a função de fazer impressão da página? "Imprimir". Quer dizer, queria colocar uma impressora para que os usuários baixem os textos do site em PDF.
Pensei que era só fazer uma adição de < link rel="stylesheet" type="text/css" href="incs/print.css" media="print" >
NÃO. :(