Perguntas com a marcação «responsive-design»

Estou tendo dificuldades para entender minha escala de fonte. Atualmente, tenho este site com um corpo font-sizede 100%. 100% do que? Isso parece calcular em 16 pixels. Fiquei com a impressão de que 100% de alguma forma se referiria ao tamanho da janela do navegador, mas aparentemente não porque sempre …

1188 css  responsive-design  font-size 

Quero criar um divque possa alterar sua largura / altura conforme a largura da janela for alterada. Existem regras CSS3 que permitam alterar a altura de acordo com a largura, mantendo a proporção ? Eu sei que posso fazer isso via JavaScript, mas eu preferiria usar apenas CSS.

1058 html  css  responsive-design  aspect-ratio 

Qual é a diferença entre col-lg-*, col-md-*e col-sm-*no Twitter Bootstrap?

544 css  twitter-bootstrap  twitter-bootstrap-3  responsive-design  bootstrap-4 

Estou ficando confuso sobre as várias opções na grade de inicialização do twitter e como elas funcionam juntas. Para começar, você pode ter um fixo comum containerou a container-fluid. Então, qualquer um pode incluir uma linha comum rowou uma linha fluida row-fluid. Ou seja, você pode ter um contêiner fixo …

399 twitter-bootstrap  responsive-design  fluid-layout  fixed-width 

Eu criei um site usando a grade do Zurb Foundation 3 . Cada página possui uma grande h1: body { font-size: 100% } /* Headers */ h1 { font-size: 6.2em; font-weight: 500; } <div class="row"> <div class="twelve columns text-center"> <h1> LARGE HEADER TAGLINE </h1> </div> <!-- End Tagline --> </div> …

341 css  responsive-design  font-size  zurb-foundation  em 

Todo tutorial de desenvolvimento de site responsivo recomenda o uso da display:nonepropriedade CSS para ocultar o carregamento do conteúdo nos navegadores móveis, para que o site seja carregado mais rapidamente. É verdade? Não display:nonecarrega as imagens ou ainda carrega o conteúdo no navegador móvel? Existe alguma maneira de impedir o …

336 css  responsive-design 

Olhando através do bootstrap, parece que eles suportam o recolhimento dos itens da barra de menus para telas menores. Existe algo semelhante para outros itens na página? Por exemplo, eu tenho um junto com nav-pills flutuados para a direita. Em uma tela pequena, isso causa problemas. Eu adoraria colocá-lo em …

298 html  css  twitter-bootstrap  responsive-design 

Quero um botão para ocupar toda a largura da coluna, mas com dificuldades ... <div class="span9 btn-block"> <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> </div> Como faço para tornar o botão tão largo quanto a coluna?

276 css  twitter-bootstrap  html  responsive-design 

Suponha que eu tenho um script de histograma que cria um gráfico de 960 500 svg. Como faço para que isso seja responsivo, o redimensionamento das larguras e alturas do gráfico é dinâmico? <script> var n = 10000, // number of trials m = 10, // number of random variables …

224 javascript  responsive-design  d3.js 

Atualmente, quando a largura do navegador cai abaixo de 768px, a barra de navegação muda para o modo recolhido. Quero alterar essa largura para 1000 px. Portanto, quando o navegador estiver abaixo de 1000 px, a barra de navegação mudará para o modo recolhido. Eu quero fazer isso sem usar …

205 css  twitter-bootstrap  responsive-design  navbar  collapse 

Eu tenho um site (g-floors.eu) e quero tornar o plano de fundo (em css, 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 em que consigo pensar, mas é uma solução alternativa. Criando várias imagens …

195 css  responsive-design  background-image  image-resizing 

(Esta é uma pergunta com várias partes, farei o possível para resumir o cenário.) No momento, estamos construindo um aplicativo Web responsivo (leitor de notícias) que permite que os usuários deslizem entre o conteúdo com guias, bem como rolar verticalmente dentro de cada conteúdo com guias. Uma abordagem comum para …

191 javascript  ios  css  responsive-design  mobile-safari 

O IE8 não suporta a seguinte consulta de mídia CSS: @import url("desktop.css") screen and (min-width: 768px); Caso contrário, qual é a maneira alternativa de escrever? O mesmo funciona bem no Firefox. Algum problema com o código abaixo? @import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px);

178 html  css  responsive-design  internet-explorer-8  media-queries 

Saiba mais sobre o uso de Stack Overflow no código : Сетка из адаптивных (responsivo) Estou pensando em como criar um layout com quadrados responsivos . Cada quadrado teria conteúdo alinhado vertical e horizontalmente . O exemplo específico é exibido abaixo ...

170 html  css  responsive-design  grid-layout  aspect-ratio 

Eu estava lendo esta postagem de stackoverflow intitulada "Você pode fazer um iFrame responsivo?", E um dos comentários / respostas me levou a esse jfiddle. Mas quando tentei implementar o HTML e CSS para atender às minhas necessidades, não tive os mesmos resultados / sucesso. Criei meu próprio violino JS …

144 css  iframe  responsive-design