Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Layout Responsivo #01: Introdução
<!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>
<!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>
<!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>
@media screen {
/* Estilos para monitores aqui */
}
@media print {
/* Estilos para impressão aqui */
}
<!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>
<!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>
@AgogosGitHub

This comment has been minimized.

Copy link

@AgogosGitHub AgogosGitHub commented Aug 20, 2021

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. :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment