tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

Web Design Responsive - Consultas de mídia


O que é uma consulta de mídia?

consulta de mídia é uma técnica CSS introduzida no CSS3.

Ele usa o @media regra para incluir um bloco de propriedades CSS somente se uma determinada condição é verdadeira.

Exemplo

Se a janela do navegador for menor que 500px, a cor de fundo muda para azul claro:

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}
Tente você mesmo "

Adicione um ponto de interrupção

Anteriormente neste tutorial nós fizemos uma página web com linhas e colunas, e foi responsivo, mas não ficam bem em uma tela pequena.

consultas de mídia pode ajudar com isso. Nós podemos adicionar um ponto de interrupção em que certas partes do desenho irão comportar-se de forma diferente em cada lado do ponto de interrupção.


Área de Trabalho

Telefone

Use uma consulta de mídia para adicionar um ponto de interrupção na 768px:

Exemplo

Quando a tela (janela de navegador) se torna menor do que 768px, cada coluna deve ter uma largura de 100%:

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}
Tente você mesmo "

Sempre design for Mobile Primeira

Móvel Em primeiro lugar significa projetar para dispositivos móveis antes de projetar para o desktop ou qualquer outro dispositivo (Isso fará com que a exibição da página mais rápido em dispositivos menores).

Isto significa que temos de fazer algumas mudanças em nosso CSS.

Em vez de mudar estilos quando a largura fica menor do que 768px, devemos mudar o projeto quando a largura fica maior do que 768px. Isso fará com que nosso projeto móvel Primeiro:

Exemplo

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
Tente você mesmo "

outro ponto de interrupção

Você pode adicionar quantos pontos de interrupção como você gosta.

Nós também irá inserir um ponto de interrupção entre tablets e telefones celulares.


Área de Trabalho

Comprimido

Telefone

Fazemos isso através da adição de mais uma consulta de mídia (pelo 600px), e um conjunto de novas classes de dispositivos maiores que 600px (mas menor do que 768px):

Exemplo

Note-se que os dois conjuntos de classes são quase idênticos, a única diferença é o nome ( col- e col-m- ):

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
Tente você mesmo "

Pode parecer estranho que temos dois conjuntos de classes idênticas, mas nos dá a oportunidade em HTML, para decidir o que vai acontecer com as colunas em cada ponto de interrupção:

Exemplo HTML

Para área de trabalho:

A primeira ea terceira parte, ambas abrangem 3 colunas cada. A seção do meio terá uma duração de 6 colunas.

Para os comprimidos:

A primeira seção terá uma duração de 3 colunas, o segundo terá uma duração de 9, ea terceira seção será exibida abaixo das duas primeiras seções, e terá uma duração de 12 colunas:

<div class="row">
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div>

Orientação: Retrato / Paisagem

consultas meios podem também ser usados ​​para mudar a disposição de uma página, dependendo da orientação do navegador.

Você pode ter um conjunto de propriedades CSS que só se aplica quando a janela do navegador é maior do que sua altura, um chamado orientação "paisagem":

Exemplo

A página web terá um fundo azul claro se a orientação está no modo paisagem:

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}
Tente você mesmo "