Articles of design responsivo

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 […]

Como remover resources responsivos no Twitter Bootstrap 3?

Desde o Bootstrap 3, não há mais arquivos separados para folhas de estilo responsivas e padrão. Então, como posso remover facilmente os resources responsivos?

Imagens de fundo css responsivas

Eu tenho um site (g-floors.eu) e eu quero fazer o fundo (em css eu defini uma imagem bg para o conteúdo) também responsivo. Infelizmente eu realmente não tenho nenhuma idéia de como fazer isso, exceto por uma coisa que eu posso pensar, mas é uma solução bastante. Criando várias imagens e, em seguida, usando o […]

Tamanho da Fonte Responsivo

Eu criei um site usando a grade Zurb Foundation 3. Cada página tem um grande h1. CSS body {font-size:100%} /* Headers */ h1 { font-size:6.2em;font-weight:500; } HTML LARGE HEADER TAGLINE Quando eu redimensiono o navegador para o tamanho do celular, a fonte grande não se ajusta e faz com que o navegador inclua uma rolagem […]