Media CSS (@media)

O tipo de mídia do CSS permite formatar o documento para que ele seja exibido corretamente em vários tipos de mídia (por exemplo, tela, impressão, navegadores de áudio, etc.).

Introdução ao tipo de mídia

A função @media (mídia) do CSS é uma das mais importantes, e você pode especificar folhas de estilo separadas para diferentes tipos de mídia. Esta é uma das melhores maneiras de construir páginas da Web amigáveis para impressoras.-Basta atribuir diferentes folhas de estilo para o tipo de mídia 'impressão'.

Alguns atributos CSS são aplicáveis apenas a certos tipos de mídia. Por exemplo, opage-break-afterAs propriedades são aplicáveis apenas a mídias de paginação. No entanto, algumas propriedades podem ser compartilhadas por diferentes tipos de mídia, mas pode ser necessário usar valores diferentes para essa propriedade.family: Times, serif;-sizesize

Por exemplo, a propriedade pode ser usada para mídia de tela e impressão, mas pode ter valores diferentes.

Em comparação com a melhor legibilidade, os documentos geralmente precisam de fontes maiores em telas de computador do que em telas de impressora, e fontes sem serifa também são consideradas mais fáceis de ler em telas de computador, enquanto as fontes com serifa são populares na impressão. Portanto, deve ser especificado que a folha de estilo ou um conjunto de regras de estilo deve ser aplicado a certos tipos de mídia.

Criar folhas de estilo dependentes de mídia

A declaração de método deve aparecer no início da folha de estilo, antes de qualquer declaração. Qualquer regra de estilo especificada na folha de estilo cobrirá as regras de estilo conflitantes na folha de estilo importada.1Geralmente, são usados três métodos para especificar a dependência de mídia de uma folha de estilo:

: Usar regra @media

A regra @media é usada para definir regras de estilo diferentes para diferentes tipos de mídia em um único estilo. Comumente, ela é seguida por uma lista de tipos de mídia separados por vírgula e um bloco de declarações CSS, que contém regras de estilo para o meio alvo.14As declarações de estilo no exemplo abaixo instruem o navegador a exibir no monitor com12o tipo de letra Arial exibe o conteúdo do corpo, mas no caso de impressão, será exibido com o tipo de letra Timesponto.f-ponto. Masheight1height:2dois valores das propriedades são definidos como

:
　　　　print.css") print;
　　　　　　　　@media screen{32color: #32.
　　　　　　　　family: Times, serif;-cd-family: Arial, sans
　　　　　　　　family: Times, serif;-font　14serif;
　　　　;
;
px;
　　　　print.css") print;
　　　　　　　　@media print {6347.
　　　　　　　　family: Times, serif;-color: #ff
　　　　　　　　family: Times, serif;-font　12size:
　　　　;
;
pt;
　　　　print.css") print;
　　　　　　　　f-line　1height:2.
　　　　;
;

A declaração de método deve aparecer no início da folha de estilo, antes de qualquer declaração. Qualquer regra de estilo especificada na folha de estilo cobrirá as regras de estilo conflitantes na folha de estilo importada.2é inválido.

: Usar regra @import-A regra @import é outra maneira de definir informações de estilo para meios específicos.

screen.css") screen;/Basta especificar os tipos de mídia separados por vírgula após a URL da folha de estilo importada.
screen.css") screen;/@import url("css
print.css") print;
　　　　body {5background: #f5background: #f5.
　　　　f-line　1height:2.
;

}

A declaração de método deve aparecer no início da folha de estilo, antes de qualquer declaração. Qualquer regra de estilo especificada na folha de estilo cobrirá as regras de estilo conflitantes na folha de estilo importada.3: Usar Elemento <link>

Os elementos no atributo media são usados para especificar que o meio de destino é o estilo de folha externa no documento HTML.

<link rel="stylesheet" media="all" href="css/common.css">
<link rel="stylesheet" media="screen" href="css/screen.css">
<link rel="stylesheet" media="print" href="css/print.css">

Neste exemplo, a propriedade media indica ao navegador carregar a tabela de estilo externa "screen.css" e aplicá-la apenas à tela, enquanto "print.css" é usada para impressão.

Diferentes tipos de mídia

A tabela a seguir lista os vários tipos de mídia que podem ser usados para localizar diferentes tipos de dispositivos (por exemplo, impressoras, dispositivos móveis, telas de computador, etc.).

Tipo de Mídia