19
Nos browser Chrome e Firefox existem opções nas ferramentas de desenvolvimento que já vem nativas com os browsers para trabalhar com resoluções especificas. Abaixo os tutoriais de como ativar tais ferramentas.
Chrome
No Google Chrome existe no DevTools dele uma opção de Emulador, onde você pode simular diversas características no seu browser.
Para ativar, ...
respondida 14/03/14 às 3:58
Gabriel Gartz
5.52422 medalhas de ouro2020 medalhas de prata4747 medalhas de bronze
17
Responsivo (responsive)
Estes podem fazer uso ou não de media-queries, o que define ele é que os tamanhos dos objetos acompanham a tela geralmente baseado em porcentagem, então ele se ajusta conforme a necessidade não tendo um tamanho definido para cada elemento
Adaptativo (adaptive)
Fazem uso de media-queries geralmente (ou talvez outros métodos de ...
respondida 16/03/18 às 21:53
14
Podes ocultar qualquer objecto por classe ou id usando o seguinte código:
@media (max-width:768px) {
#id_a_ocultar_em_tablet {
display: none;
}
.classe_a_ocultar_em_tablet {
display: none;
}
}
@media (max-width:480px) {
#id_a_ocultar_em_smartphone {
display: none;
}
.classe_a_ocultar_em_smartphone {
...
respondida 11/12/13 às 16:24
António Almeida
58011 medalhas de ouro88 medalhas de prata1818 medalhas de bronze
13
Você pode apenas adicionar a propriedade background-size: cover; em seu css.
Cover: especifica que a imagem de fundo deve ser dimensionado de modo que seja tão pequena quanto possível ao mesmo tempo assegurar que ambas as dimensões são maiores do que ou igual à dimensão correspondente do recipiente.
Ficaria assim o seu css:
.login-page
{
...
respondida 17/09/15 às 13:07
Randrade
21,4mil22 medalhas de ouro4545 medalhas de prata118118 medalhas de bronze
13
Utilize as classes de responsividade do Bootstrap
http://getbootstrap.com/css/#responsive-utilities-classes
No seu caso, utilizar as classes hidden-xs para ocultar algo na resolução mobile e visible-xs para mostrar apenas em resolução mobile.
<div class="hidden-xs">
Elemento oculto para mobile
</div>
<div class="visible-xs">
...
respondida 15/12/15 às 15:28
Pedro Camara Junior
6.61111 medalhas de ouro1515 medalhas de prata5353 medalhas de bronze
13
Ele é carregado. Caso você veja no Inspector de elemento você verá que ele está lá, só está escondido com o display:none. Um bom exemplo para você ver que ele é carregado e consome dados, é você fazer um loop de linhas com por exemplo, 50 mil registros; você verá que irá demorar um tempo para realizar o processo, mas ao findar, ele não aparecerá nada, pois ...
respondida 6/01/16 às 4:29
Alisson Acioli
5.74366 medalhas de ouro3131 medalhas de prata6565 medalhas de bronze
11
Simplesmente use o componente .table-responsive que fornece o Bootstrap:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Pode encontrar mais informação na documentação do projeto.
Não é necessário hackear o CSS ou usar outros componentes diferentes da tabela como foi sugerido.
8
você pode fixar um elemento no final da pagina usando position fixed ou absolute e setar o bottom para 0px.
Segue um exemplo com header and footer fixos e a section com largura fixa e centralizada na pagina.
var showContent = document.getElementById("showContent");
var content = document.getElementById("content");
showContent.addEventListener("...
7
Com o Twitter Bootstrap tudo fica mais fácil, basta você criar o HTML corretamente e incluir as classes certas em suas tags, visto que ele já tem todo o CSS criado para que você utilize o design responsivo.
Esse é um HTML básico de uma tabela responsiva:
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...&...
respondida 11/12/13 às 16:21
Kenny Rafael
6.66833 medalhas de ouro2626 medalhas de prata5656 medalhas de bronze
7
Montei esse exemplo seguindo a estrutura do bootstrap.
Analise e coloque de acordo com a sua necessidade.
Criei uma div chamada .trapezoid-search e dentro um input[type=text]
<header>
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="trapezoid-search">
<input type="...
7
Você pode desabilitar as opções de zoom em dispositivos móveis adicionando user-scalable=no para a meta tag viewport.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Isso desabilita o zoom, sendo assim os usuários só serão capazes de scrollar e seu site vai parecer um pouco mais com uma ...
7
Se a imagem for menor que a dimensão do div, a abordagem do max-width e do max-height não vai funcionar, aí é melhor colocar width: 100%; e brincar com o height para poder acertar imagem. Colocar height: auto; vai fazer a imagem aumentar a altura proporcionalmente. Se você forçar para height: 100%;, a imagem vai ficar desproporcional, mas ocupando toda a ...
7
Consegui achar duas alternativas:
Usando inline-block
Usando inline-flex
Usando inline-block
Para ter mais abrangência pode usar o display inline-block assim:
.master {
border: solid 1px #000;
max-width: 500px;
font-size: 0;
}
.master div {
border-radius: 50%;
display: inline-block;
text-align: center;
margin: 10px;
...
respondida 28/03/15 às 2:14
Miguel Angelo
28,3mil33 medalhas de ouro7373 medalhas de prata112112 medalhas de bronze
7
Entendendo melhor a pergunta (que é mais na linha de "Por que fazer um app quando um site responsivo em princípio já dá conta do recado?" e não de "Quais funcionalidades nativas podem instigar uma empresa a querer criar um app para celular?"), acredito que a resposta para a maioria dos casos é: não há por quê, a não ser que dar ao usuário um ícone para abrir ...
respondida 7/07/15 às 23:42
Piovezan
14,7mil33 medalhas de ouro3333 medalhas de prata7373 medalhas de bronze
7
Aplicativo vs Site responsivo
A única vantagem de realmente desenvolver um aplicativo além ou no lugar de um site mobile (ou responsivo) seria o fato dos navegadores móveis terem mais limitações. As três características dos aplicativos que podem tornar o desenvolvimento vantajoso são (eu acredito ser apenas estas duas):
Adicionar características ...
respondida 8/07/15 às 17:40
6
Eu faço assim (Usando o Bootstrap):
textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
<div class="span9">
<textarea></textarea>
</div>
respondida 14/02/14 às 12:38
Edgar Muniz Berlinck
4.4691515 medalhas de prata3030 medalhas de bronze
6
Recentemente eu respondi uma pergunta onde a solução, em grande parte, pode ser aplicada aqui também.
Você pode resolver este problema da seguinte forma:
.menu{ /* estilo atribuído ao elemento que contém o menu */
position:absolute;
left:0;
top:0;
width:200px;
}
body{
padding-left:200px /*padding do tamanho do width do menu*/
}
...
respondida 22/05/14 às 15:00
Kazzkiq
11,3mil77 medalhas de ouro4040 medalhas de prata7777 medalhas de bronze
6
Você pode especificar e aplicar conforme a combinação de altura e largura desejado. Exemplo:
@media (min-width: 768px) and (max-width: 979px)
Sinceramente, não é mais fácil utilizar algum framework como o bootstrap ?
6
Bem caso deseje mesmo utilizar o checkBox, você pode fazer assim:
var checkbox = $('#button-menu');
$('body').not('#menu').click(function() {
checkbox.prop("checked", false);
});
$('#button-menu, #menu').click(function(event) {
event.stopPropagation();
});
#geral {
width: 200px;
height: 200px;
background: #333;
}
#menu {
...
respondida 29/12/15 às 18:26
Samir Braga
9.93855 medalhas de ouro2424 medalhas de prata4949 medalhas de bronze
6
Supondo que você deseja que a imagem se reduza com o redimensionamento da pagina se focando em design responsivo, Basta usar porcentagens % no width.
img{ width: 50%; }
Dessa forma sua imagem ficara sempre a 50% do bloco principal, o bloco pode ser uma section ou ate mesmo a tela pura do browser.
o resto e só ajustar com media Queries.
5
O que estás à procura chama-se Viewport Percentage Units que são unidades em relação ao tamanho da tela:
Ver exemplo no JSFiddle
No JSFiddle, manipula a largura da janela de preview para veres o texto a encolher/aumentar.
p{
font-size: 16px; font-size: 4vw;
}
Essencialmente, os valores são:
1 v == 1% do tamanho inicial do texto na tela:
vw (...
respondida 9/10/14 às 20:16
Zuul
34,8mil1818 medalhas de ouro8686 medalhas de prata180180 medalhas de bronze
5
Reparei que na resolução xs o body recebe um padding-left e padding-right de 20px. Isso está fazendo com que a "margem" apareça. Experimente setá-los para zero, manualmente:
body {
padding-left: 0;
padding-right: 0;
}
Exemplo no jsFiddle.
Atualização: Nessa mesma resolução xs, os elementos do tipo navbar recebem uma margem negativa de 20px para "...
respondida 8/10/14 às 16:55
mgibsonbr
79,3mil2121 medalhas de ouro168168 medalhas de prata312312 medalhas de bronze
5
Utiliza-se as META TAGs do html.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
A propriedade initial-scale controla o nível de amplificação quando a página é carregada pela primeira vez. As propriedades maximum-scale, minimum-scale, e user-scalable controlam a permissão para o usuário efetuar ...
5
Um conselho, use o Twitter Bootstrap, se você não deseja utilizar todos os componentes dele, você pode customiza-lo e baixar apenas a parte responsiva.
Porém caso você seja um programador Hardcore, pode fazer isso usando algumas propriedades bastante peculiares das media queries.
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: ...
respondida 15/04/15 às 12:56
KaduAmaral
11,3mil11 medalhas de ouro2727 medalhas de prata7474 medalhas de bronze
5
Para mim a maneira mais sensata e sem gambiarra é utilizar o calc, com ele você evita utilizar position absolute ou javascript forçando muitas vezes o reflow e sobreposição de elementos com z-index, sem falar que evita diversos bugs e é suportado em quase todos os navegadores, com exceção de alguns browsers para mobile.. Porem não me preocupo com isso, pois ...
5
Se você der uma olhada no css do bootstrap notará o seguinte código:
@media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
@media (max-width: 767px) {
.visible-xs {
display: block !important;
}
table.visible-xs {
display: table !important;
}
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
...
respondida 27/10/15 às 23:13
Gabriel Rodrigues
15,8mil88 medalhas de ouro4949 medalhas de prata105105 medalhas de bronze
5
Sobre simular o site responsivo os navegadores modernos já tem uma ferramenta específica para isso. Segue imagem de como acessar esse recurso.
Ao clicar nesse ícone abrirá diversas opções para emular diferentes devices, se vai estar em landscape ou portrait, user agent,nsimular a conexão da internet etc.
No firefox é o mesmo sistema do Chrome.
Agora sobre ...
5
O tema "suporte a vários ecrãs/telas", apesar de não ser complexo, contém muitos aspectos pelo que se torna difícil abordá-lo de forma completa, no formato de resposta do stackoverflow.
Irei abordar apenas os aspectos que julgo serem os mais relevantes para o seu entendimento.
Características da tela.
Tamanho da tela(Screen size) - É medida da diagonal ...
respondida 21/03/17 às 22:39
ramaral
43,8mil1111 medalhas de ouro5151 medalhas de prata105105 medalhas de bronze
5
Você terá alguns desafios para resolver, como por exemplo identificar corretamente os "radio buttons" para cada pergunta, mas deixo um código para sugestão.
//Adiciona linhas
$(".add-row").click(function () {
if ($('.row-title').val() == '') {
alert('Digite o título da pergunta');
return;
}
if ($("#pergunta tbody tr ...
respondida 14/06/17 às 20:58
abfurlan
10,4mil22 medalhas de ouro1919 medalhas de prata4848 medalhas de bronze
5
Você pode utilizar o próprio console do Google Chrome.
Ao apertar F12 (Abrir o console), você pode clicar no ícone da imagem abaixo:
Após, no topo, você pode utilizar a opção de diversos tamanhos e também neste local você pode utilizar as opções de telas de diversos dispositivos, assim verificando a responsividade do seu site.
respondida 28/06/17 às 12:05
Maurício Krüger
2.53322 medalhas de ouro2121 medalhas de prata4747 medalhas de bronze
Apenas as respostas wiki não pertencentes à comunidade mais votadas e de um tamanho mínimo se qualificam
Tags relacionadas
layout-responsivo × 228css × 121
html × 86
css3 × 46
twitter-bootstrap × 35
html5 × 32
javascript × 19
mobile × 18
media-queries × 17
jquery × 15
responsivo × 12
android × 11
bootstrap-3 × 10
bootstrap-4 × 9
android-layout × 8
responsive × 8
imagem × 7
layout × 7
grid × 7
bootstrap × 5
div × 5
menu × 5
flexbox × 5
table × 4
nav-bar × 4