Articles of responsivo design

Como usar o Twitter Bootstrap 3 para sites não responsivos?

Como você pode ler em sua página, o novo Bootstrap 3 é “mobile first”: Com o Bootstrap 2, adicionamos estilos opcionais compatíveis com dispositivos móveis para os principais aspectos da estrutura. Com o Bootstrap 3, reescrevemos o projeto para ser compatível com dispositivos móveis desde o início . Em vez de adicionar estilos móveis opcionais, […]

Como fazer um elemento expandir ou contrair seu contêiner pai?

O objective é ter o elemento expandido para o tamanho de seu contêiner pai, neste caso, um , não importando quão grande ou pequeno esse contêiner possa ser. O código: svg, #container{ height: 100%; width: 100%; } A solução mais comum para este problema parece ser definir o atributo viewBox no elemento . viewBox=”0 0 […]

bootstrap 3 mesa responsiva com primeira coluna fixa

Estou segmentando especificamente para dispositivos móveis, por isso tenho uma tabela responsiva do Bootstrap. É apenas um div com a class bootstrap “table-responsive” e uma tabela aninhada dentro com as classs “table table-border table-bordered table-hover table-condensed”. Existe alguma maneira fácil de garantir que a primeira coluna seja corrigida (não é rolada horizontalmente)? Em dispositivos móveis, […]

resize tamanho da fonte de acordo com o tamanho div

Eu fiz este jsfiddle o html: header not a lot of text here but still overflowing com css: html, body { height: 100%; width: 100%; } #launchmain { width: 55%; display: inline-block; position: relative; top:10%; left:25%; } #launchmain:after { padding-top: 79.26%; display: block; content: ”; margin-top: 10px; } #box1 { border: 1px solid #000000; position: […]

Redimensionar automaticamente imagens com tamanho do navegador usando CSS

Eu quero que todas as minhas imagens (ou apenas algumas) sejam redimensionadas automaticamente quando resize a janela do meu navegador. Eu encontrei o seguinte código – ele não faz nada. HTML CSS body { font-family: Arial; font-size: 11px; color: #ffffff; background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed; background-size: cover; } #icons { position: absolute; bottom: […]

jQuery: Como detectar a largura da janela em tempo real?

Eu tenho um elemento de rolagem na minha página (com o plugin jScrollPane jQuery). O que eu quero realizar é uma maneira de desativar a janela de rolagem, detectando a largura da janela do navegador. Estou fazendo um layout responsivo e quero que esse recurso de rolagem seja desativado quando o navegador estiver abaixo de […]

Por que a ordem das consultas de mídia é importante no CSS?

Ultimamente, venho projetando sites que são mais responsivos e tenho usado consultas de mídia CSS com frequência. Um padrão que notei é que a ordem em que as consultas de mídia são definidas realmente importa. Não testei em todos os navegadores, mas apenas no Chrome. Existe uma explicação para esse comportamento? Às vezes, é frustrante […]

Web site responsivo reduzido para largura total em dispositivos móveis

Estou testando a capacidade de resposta do Bootstrap e tenho um site de demonstração . Quando eu redimensiono o navegador em uma área de trabalho, tudo funciona bem, incluindo a barra de navegação que se torna um menu reduzível com um pequeno ícone no topo que eu posso clicar para ver mais botões de menu. […]

consulta de mídia CSS do iPhone 5

O iPhone 5 tem uma canvas mais longa e não está captando a visão móvel do site. Quais são as novas consultas de design responsivo para o iPhone 5 e posso combinar com as consultas do iPhone existentes? Minha consulta de mídia atual é esta: @media only screen and (max-device-width: 480px) {}

Tornando um iframe responsivo

Eu estava lendo este post stackoverflow intitulado “Você pode fazer um iFrame responsivo?”, E um dos comentários / respostas me levou a este jfiddle. Mas quando tentei implementar o HTML e CSS para atender às minhas necessidades, não tive os mesmos resultados / sucesso. Eu criei meu próprio violino JS para mostrar como ele não […]