background preloader

Responsividade

Facebook Twitter

é isso aí

Dicas de códigos para Site Responsivo. Um Site Responsivo tem um layout flexível que se adapta a qualquer dispositivo, seja smartphone, tablet ou desktop .

Dicas de códigos para Site Responsivo

Recomendamos sempre iniciar o projeto configurando primeiramente o layout para smartphone e depois para os outros dispositivos. A tag meta viewport A tag meta viewport é um comando necessário para layout responsivo. Isto irá definir o ponto de vista em todas as telas em uma relação de aspecto 1 × 1, que remove a funcionalidade padrão dos navegadores de smartphones, que tornam sites em full-view e permite aos usuários possam fazer zoom no layout . Media Queries CSS3 suporta os tipos de mídia : impressão de tela, e portátil,, dispositivo de largura ( max-width ) , orientação e cor.

Max-width e min-width A propriedade max-width permite que você defina a largura máxima do elemento. Estudos e guia sobre tipografia responsiva. CSS: em, px, pt, cm, in… Em, px, pt, cm, in… CSS oferece um número de unidades diferentes para a expressão de comprimento.

CSS: em, px, pt, cm, in…

Algumas têm sua história em tipografia, como o ponto (pt) e a paica (pc), outros são conhecidos devido a seu uso diário, como centímetro (cm) e polegada (in). E há, também, uma unidade "mágica" que foi inventada especificamente para CSS: px. Isso significa que diferentes propriedades precisam de diferente unidades? Não, as unidades não têm nada a ver com as propriedades, mas têm tudo a ver com a mídia de saída: tela ou papel.

Css - Font-size responsivo conforme o tamanho da tela - Stack Overflow em Português. Automaticamente com tamanho de tela Acesse essa documentação do MDN sobre CSS media queries.

css - Font-size responsivo conforme o tamanho da tela - Stack Overflow em Português

Como não detalhou exatamente os pontos de corte, fica complicado dar um exemplo prático e genérico demais. Porém o link acima explica muito bem como fazer isso. Utilizando CSS Media Queries. Neste artigo vamos falar sobre Media Queries, que é a utilização de Media Types com uma ou mais expressões envolvendo características de uma media para definir formatações para diversos dispositivos.

Utilizando CSS Media Queries

Os browsers ou as aplicações lêem as expressões definidas na Query, caso o dispositivo em questão se encaixe nessas requisições o CSS será aplicado. Explicando o que é Media types Os media types definem para que tipo de media um certo código CSS é direcionado. O HTML foi gerado para ser portátil, ou seja, lido e interpretado por qualquer tipo de dispositivo. Só que cada dispositivo exibe o HTML de uma maneira, devido a fatores como, por exemplo, as dimensões da tela. Para que possamos manter nossas páginas sempre adequadas a cada tipo de visualização, utilizamos os media types, que são listados abaixo de acordo com sua utilização.

Usando Media Queries - Guia do desenvolvedor web. Uma media query consiste de um media type e pelo menos uma expressão que limita o escopo das folhas de estilo usando media features, tal como largura, altura e cor.

Usando Media Queries - Guia do desenvolvedor web

Media queries, adicionadas no CSS3, deixam a apresentação do conteúdo adaptado a uma gama especifica de dispositivos não precisando mudar o conteúdo em si. SintaxeEdit Media queries consistem de um media type e podem, a partir de uma especificação CSS3, contendo uma ou mais expressões, expressa em media features, que determinam ou verdadeiro ou falso. Os resultados da query são verdadeiros se o media type especificado na media query corresponde ao tipo do documento exibido no dispositivo e todas as expressões na media query são verdadeiras. Quando uma media query é verdadeira, a camada de estilo ou as regras de estilos correspondentes são aplicadas, seguindo o padrão de regras de cascatas.

A menos que você use os operadores not ou only, o media type é opcional e o tipo all será implícito. Operadores lógicos and not only cor Exemplos. Flexibilidade em páginas para dispositivos móveis com media queries. Já fez seu site mobile?

Flexibilidade em páginas para dispositivos móveis com media queries

Explore o mercado que mais cresce no Brasil e no mundo com as melhores práticas de Web mobile. No artigo sobre viewport, aqui do Blog, vimos como criar uma página com tamanho adequado aos diversos dispositivos que temos que lidar hoje em dia. Se colocarmos um viewport com width=320, por exemplo, conseguimos criar uma página para iPhone e outros smartphones normalmente. Mas e se a página for aberta num iPad de 768px de resolução? Ou em um tablet Android de 600px de largura? Criar sites específicos para cada tamanho de tela não é a melhor solução. Review do livro "Responsive Web Design" do Ethan Marcotte - sergiolopes.org. Design responsivo é o futuro da Web.

Review do livro "Responsive Web Design" do Ethan Marcotte - sergiolopes.org

Ethan Marcotte criou o termo em 2010 em um famoso artigo do A List Apart, que depois deu origem a seu livro "Responsive Web Design", editado pela A Book Apart. Há pouco tempo, li a versão em ebook do livro em meu Kindle Fire -- recomendo um leitor colorido como o Fire pelas imagens. Minha experiência começou no excelente processo de compra, extremamente descomplicado, da A Book Apart. Dois cliques, nenhum campo preenchido e compra feita pelo PayPal -- e eu não tinha comprado nunca com eles, não tinha cadastro anterior nem nada.

(aliás, se você for comprar, recomendo o combo com o "Mobile First" do Luke Wroblewski) Design Responsivo na prática 2: do layout ao HTML. Há um tempinho atrás eu escrevi aqui no Tableless um artigo chamado Design Responsivo na Prática – Do Rascunho ao Digital.

Design Responsivo na prática 2: do layout ao HTML

A abordagem na época foi mais voltada para os designers, que estavam carentes de conteúdo bacana sobre o assunto. Mas, no entanto, todavia, algumas pessoas comentaram que gostariam de ver o desenvolvimento do dito cujo do layout criado passo-a-passo ou ao menos uma demo. Como eu não poderia deixar de atender os devs também, é justamente isto que vou fazer hoje. Portanto, pegue seu cafézinho pois hoje é dia de codar! 🙂 Hora da Revisão.