Articles of design responsivo

Manter a proporção do div de acordo com a altura

Eu preciso manter a largura de um elemento como uma porcentagem de sua altura . Então, quando a altura muda, a largura é atualizada. O oposto é alcançável usando um valor% para preenchimento superior, mas preenchimento esquerdo como porcentagem será uma porcentagem da largura de um object, não sua altura. Então, com marcação assim: Eu […]

Imagens não responsivas por padrão no Twitter Bootstrap 3?

Parece que com a nova versão 3.0 eu tenho que definir os nomes de class de uma imagem para col-lg-4 col-sm-4 col-4 se a imagem é parte de div com os mesmos nomes de class para tornar a imagem responsiva com todos os pontos de interrupção. Na versão 2, as propriedades CSS das imagens herdaram […]

Manter a proporção de acordo com a largura e a altura

É possível ajustar e centralizar um div quadrado na viewport e sempre manter sua proporção de acordo com a largura e altura ? Requisitos: apenas CSS o tamanho do quadrado deve adaptar-se à menor dimensão (largura ou altura) da janela de visualização, independentemente da orientação (paisagem ou retrato) da janela de visualização. a praça deve […]

Altere a ordem das colunas col – * – 12 no Bootstrap usando push / pull

Eu tenho duas colunas do mesmo tamanho ( .col-xs-12 ) e eu mudaria de lugar quando o tamanho da canvas correspondesse ao de um dispositivo móvel. Eu colocaria na ordem inversa. Eu li que as diretivas de bootstrap push and pull ajudam a conseguir isso, mas é possível alterar o lugar de duas colunas do […]

Pontos de quebra comuns de consultas de mídia CSS

Eu estou trabalhando em um site responsivo com consultas de mídia CSS. O seguinte é uma boa organização para dispositivos? Telefone, iPad (Paisagem e Retrato), Desktop e Laptop, canvas grande Quais são os valores de ponto de interrupção das consultas de mídia comuns? Estou planejando usar os seguintes pontos de interrupção: 320: Retrato de Smartphone […]

A meta tag da viewport é realmente necessária?

Criei alguns sites responsivos, mas sou bastante novo no desenvolvimento de sites responsivos. No meu CSS, 99% dos meus valores estão em ems ou porcentagens. Estou usando consultas de mídia (max-width e max-device-width) para fazer alterações de layout. Eu não incluí uma metatag da viewport e ela funciona perfeitamente no iOS, em vários telefones e […]

Triângulo responsivo do CSS com largura dos por cento

O código abaixo irá criar uma seta logo abaixo de um elemento : JSFiddle .btn { position: relative; display: inline-block; width: 100px; height: 50px; text-align: center; color: white; background: gray; line-height: 50px; text-decoration: none; } .btn:after { content: “”; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-width: 10px 50px 0 50px; border-style: […]

Quais são as regras para sobreposição de consulta de mídia CSS?

Como espaçamos as consultas de mídia com precisão para evitar sobreposições? Por exemplo, se considerarmos o código: @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } O que acontecerá em todos os […]

Devo usar max-device-width ou max-width?

Com as consultas de mídia CSS, você pode usar max-device-width para segmentar uma largura de dispositivo (como um dispositivo iPhone ou Android) e / ou uma max-width que tenha como meta a largura de uma página. Se você usar max-device-width , quando alterar o tamanho da janela do navegador na sua área de trabalho, o […]

Pontos de interrupção comuns para consultas de mídia em um site responsivo

Por isso, estou trabalhando em meu primeiro site responsivo, que faz uso extensivo de consultas de mídia. Eu queria saber se há algumas larguras de página comuns que eu deveria otimizar para. Eu provavelmente terei uma largura máxima (não indo todo o fluido) Eu estou pensando que eu vou ter talvez 3-5 larguras com pequenas […]