Don't miss out on the action at this year's Chrome Dev Summit, streaming live on YouTube. Watch now.

Seu Primeiro Site para Vários Dispositivos

muitos dispositivos mostrando o projeto final

Criar experiências para vários dispositivos não é tão difícil quando parece. Neste guia, criaremos uma página de destino de produto para o CS256: Curso de desenvolvimento para Web móvel que funciona bem em diferentes tipos de dispositivos.

O desenvolvimento para vários dispositivos com diferentes recursos, tamanhos de tela e métodos de interação amplamente diferentes pode parecer assustador, se não impossível de começar.

Criar um site totalmente responsivo não é tão difícil quanto você imagina e, para mostrar isso a você, este guia orienta você pelas etapas que podem ser usadas para começar o trabalho. Nós dividimos o guia em duas etapas simples:

  1. Definir a arquitetura de informações (comumente conhecida como IA) e a estrutura da página,
  2. Adicionar elementos de design para tornar a página responsiva e bonita em todos os dispositivos.

Crie seu conteúdo e sua estrutura

O conteúdo é o aspecto mais importante de qualquer site. Então, vamos criar o design para o conteúdo e não deixar que o design defina o conteúdo. Neste guia, identificaremos o conteúdo de que precisamos primeiro, criaremos uma estrutura de página com base nesse conteúdo e apresentaremos a página em um layout linear simples que funciona bem em janelas de visualização estreitas e largas.

Crie a estrutura da página

Nós identificamos que precisamos de:

  1. Uma área que descreve com alto nível nosso produto "CS256: Curso de desenvolvimento para Web móvel"
  2. Um formulário para coletar informações de usuários interessados no nosso produto
  3. Uma descrição aprofundada e um vídeo
  4. Imagens do produto em ação
  5. Uma tabela de dados com informações para suportar as afirmações

TL;DR

  • Primeiro, identifique o conteúdo de que precisa.
  • Esboce a Arquitetura de Informações (IA) para janelas de visualização largas e estreitas.
  • Crie uma visualização básica da página com o conteúdo, mas sem o estilo.

Também criamos uma arquitetura de informações básica e um layout para janelas de visualização estreitas e largas.

IA de janela de visualização estreita
IA de janela de visualização estreita
IA de janela de visualização larga
IA de janela de visualização larga

Isso pode ser facilmente convertido nas seções esboçadas de uma página básica que usaremos para o restante deste projeto.

<!doctype html>
<html>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>CS256: Mobile Web development - structure</title>
  </head>
  <body>   
    <div id="headline">
      <header>
        <h1></h1>
        <p></p>
      </header>
      <div id="blurb">
        <p></p>
        <ul>
          <li>
        </ul>
      </div>
      <form method="post" id="register"> 
      </form>
    </div>
    <div id="section1">
      <h2></h2>
      <p></p>
      <ul>
        <li>
      </ul>
      <video></video>
    </div>
    <div id="section2">
      <h2></h2>
      <p></p>
      <div id="images">
        <img>
      </div>
    </div>
    <div id="section3">
      <h2></h2>
      <p></p>
    </div>
    <footer>
      <p></p>
    </footer>
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-52746336-1');ga('send','pageview');
  var isCompleted = {};
  function sampleCompleted(sampleName){
    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
      isCompleted[sampleName] = true;
    }
  }
</script>
  </body>
</html>

Experimente

Adicione conteúdo à página

A estrutura básica do site está completa. Sabemos de que seções precisamos, o conteúdo que será exibido nessas seções e onde posicionar a arquitetura de informações geral. Agora podemos começar a compilar o site.

Observação: Aplicaremos o estilo depois

Crie o título e o formulário

O título e o formulário de notificação de solicitação são componentes essenciais da nossa página. Eles devem ser apresentados ao usuário imediatamente.

No título, adicione um texto simples para descrever o curso:

<div id="headline">
  <div class="container">
    <header>
      <h1>Mobile Web Development</h1>
      <p>Building Mobile Web Experiences</p>
    </header>
    <div id="blurb">
      <p>So you've heard mobile is kind of a big deal, and you're not
      sure how to transform your traditional desktop-focused web apps
      into fast, effective multi-device experiences.</p>
      <p>This course is designed to teach web developers what
      they need to know to create great cross-device web
      experiences.</p>
      <p>This course will focus on building mobile-first web apps,
      which will work across multiple platforms including:</p>
      <ul>
        <li>Android,</li>
        <li>iOS,</li>
        <li>and others.</li>
      </ul>
    </div>
    <form method="post" id="register">
    </form>
  </div>
</div>

Experimente

Também precisamos preencher o formulário. Ele será um formulário simples que coleta o nome dos usuários, seus endereços de e-mail e números de telefone.

Todos os formulários devem ter rótulos e marcadores para permitir que os usuários foquem em elementos, entendam as informações que devem ser preenchidas e para ajudar ferramentas de acessibilidade a entender a estrutura do formulário. O atributo name não só envia o valor do formulário ao servidor, como também é usado para fornecer dicas importantes ao navegador sobre como preencher o formulário automaticamente para o usuário.

Adicionaremos tipos semânticos para que os usuários possam inserir conteúdo em dispositivos móveis de forma simples e rápida. Por exemplo, ao inserir um número de telefone, o usuário deve ver apenas um teclado numérico.

<form method="post" id="register">
   <h2>Register for the launch</h2>
   <label for="name">Name</label>
   <input type="text" name="name" id="name" 
      placeholder="Thomas A Anderson" required>
   <label for="email">Email address</label>
   <input type="email" name="email" id="email" 
      placeholder="neo@example.com" required>
   <label for="tel">Telephone</label>
   <input type="tel" name="tel" id="tel" 
      placeholder="(555) 555 5555" required>
   <input type="submit" value="Sign up">
</form>

Experimente

Crie a seção de vídeo e informações

A seção de vídeo e informações do conteúdo será um pouco mais aprofundada. Ela conterá uma lista de recursos dos nossos produtos e um marcador de vídeo que mostra o produto em funcionamento para o usuário.

<div id="section1">
  <h2>What will I learn?</h2>
  <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
  <p>You'll understand what it takes to:</p>
  <ul>
    <li>build great web experiences on mobile devices</li>
    <li>use the tools you need to test performance</li>
    <li>apply your knowledge to your own projects in the future</li>
  </ul>
  <video controls poster="udacity.png">
    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
    <source src="udacity.mov" type="video/mov"></source>
    <p>Sorry your browser doesn't support video. 
       <a href="udacity.mov">Download the video</a>.
    </p>
  </video>
  <br>
</div>

Experimente

Vídeos são frequentemente usados para descrever conteúdo de forma mais interativa e para demonstrar um produto ou conceito.

Ao seguir as práticas recomendadas, você pode integrar um vídeo em seu site com facilidade:

  • Adicione um atributo controls para facilitar a reprodução do vídeo.
  • Adicione uma imagem de poster para dar uma prévia do conteúdo.
  • Adicione vários elementos <source> de acordo com os formatos de vídeo suportados.
  • Adicione texto reserva para que as pessoas possam fazer download do vídeo se não conseguirem reproduzi-lo na janela.
<video controls poster="udacity.png">
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
  <source src="udacity.mov" type="video/mov"></source>
  <p>Sorry your browser doesn't support video. 
     <a href="udacity.mov">Download the video</a>.
  </p>
</video>

Experimente

Crie a seção de imagens

Sites sem imagens podem ser um pouco chatos. Existem dois tipos de imagem:

  • Imagens de conteúdo — imagens em linha no documento e que são usadas para transmitir informações adicionais sobre o conteúdo.
  • Imagens estilísticas — imagens usadas para que o site pareça mais bonito; frequentemente, são imagens de fundo, padrões e gradientes. Abordaremos esse tópico na próxima seção.

A seção de imagens da nossa página é um conjunto de imagens de conteúdo.

Imagens de conteúdo são essenciais para transmitir o significado da página. Considere-as como as imagens usadas em artigos de jornais. As imagens que estamos usando são fotos dos instrutores do projeto: Chris Wilson, Peter Lubbers e Sean Bennet.

<div id="section2">
  <h2>Who will teach me?</h2>
  <p>The world's leading mobile web developers.</p>

  <div id="images">
    <img src="chriswilson.png" alt="Chris Wilson: Course Instructor">
    <img src="peterlubbers.png" alt="Peter Lubbers: Course Instructor">
    <img src="seanbennett.png" alt="Sean Bennet: Course Developer">
  </div>

  <br>
</div>

Experimente

As imagens estão configuradas para serem dimensionadas a 100% da largura da tela. Isso funciona bem em dispositivos com uma janela de visualização estreita, mas não tão bem nos que têm uma janela de visualização larga (como um computador). Isso será administrado na seção de design responsivo.

Muitas pessoas não têm a capacidade de visualizar imagens e frequentemente usam tecnologias de assistência, como um leitor de telas, para analisar os dados na página e transmitir essas informações ao usuário verbalmente. Certifique-se de que todas as suas imagens de conteúdo tenham uma tag alt descritiva que o leitor de tela possa ler para o usuário.

Ao adicionar tags alt, mantenha o texto delas o mais conciso possível para descrever a imagem por completo. Por exemplo, na nossa demonstração, nós simplesmente formatamos o atributo como "Nome: Função", pois isso apresenta informações suficientes para que o usuário entenda que a seção é sobre os autores e seus cargos.

Adicione a seção de dados tabulados

A última seção é uma tabela simples usada para mostrar estatísticas específicas sobre o produto.

As tabelas só devem ser usadas para dados tabulares, como matrizes de informações.

<div id="section3">
  <h2>Mobile. Why should I care?</h2>
  <p>It is huge.  Everywhere.</p>
  <table>
    <caption>
      <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
    </caption>
    <thead>
       <tr>
         <th>Country</th>
         <th>Desktop share</th>
         <th>Tablet share</th>
         <th>Mobile share</th>
       </tr>
    </thead>
    <colgroup>
       <col span="1">
       <col span="1">
       <col span="1">
       <col span="1">
    </colgroup>
    <tbody>
     <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
        <td>32%</td>
        <td>1%</td>
        <td>67%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
        <td>69%</td>
        <td>13%</td>
        <td>18%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
        <td>69%</td>
        <td>9%</td>
        <td>22%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
        <td>86%</td>
        <td>4%</td>
        <td>10%</td>
      </tr>
    </tbody>
  </table>
  <br>
</div>

Experimente

Adicione um rodapé

A maioria dos sites precisa de um rodapé para exibir conteúdo como Termos e Condições, avisos e outros conteúdos que não devem ser inseridos na navegação principal ou na área principal de conteúdo da página.

No nosso site, criaremos um simples rodapé de marcador.

<footer>
  <div class="container">
    <p>We always need a footer.</p>
  </div>
</footer>

Experimente

Resumo

Nós criamos o esboço do site e identificamos todos os principais elementos estruturais. Também garantimos que todo o conteúdo relevante esteja pronto e no local adequado para atender às nossas necessidades de negócios.

Você perceberá que, no momento, a aparência da página está péssima; isso é intencional. O conteúdo é o aspecto mais importante de qualquer site e precisamos garantir que tenhamos uma arquitetura e densidade de informações robustas. Este guia nos proporcionou uma ótima base para desenvolver. Definiremos o estilo do nosso conteúdo no próximo guia.

Adote o design responsivo

A Web pode ser acessada por diversos tipos de dispositivos, desde celulares com pequenas telas até televisores com grandes telas. Cada dispositivo apresenta seus próprios benefícios e limitações. Como um desenvolvedor Web, você deve oferecer suporte a todos os tipos de dispositivos.

Estamos criando um site que funciona em diversos tamanhos de tela e tipos de dispositivo. Nós criamos a arquitetura de informações da página e uma estrutura básica. Nesta seção, transformaremos nossa estrutura básica com conteúdo em uma bela página que é responsiva em uma grande quantidade de tamanhos de tela.

Seguindo os princípios do desenvolvimento Web que prioriza os dispositivos móveis, começamos com uma janela de visualização estreita — similar a um celular — e compilamos primeiro para essa experiência. Em seguida, expandimos para classes de dispositivos maiores. Podemos fazer isso tornando a janela de visualização mais larga e verificando se o design e o layout estão adequados.

Anteriormente, nós criamos alguns designs de alto nível diferentes para como o conteúdo deve ser exibido. Agora, precisamos fazer com que nossa página se adapte a esses diferentes layouts. Para isso, devemos decidir onde posicionar nossos pontos de interrupção — pontos onde o layout e os estilos mudam — com base em como o conteúdo se encaixa no tamanho da tela.

TL;DR

  • Sempre use uma janela de visualização.
  • Sempre comece com uma janela de visualização estreita e vá ampliando.
  • Baseie seus pontos de interrupção em quando precisar adaptar o conteúdo.
  • Crie uma visão de alto nível do seu layout nos principais pontos de interrupção.

Adicione uma janela de visualização

Mesmo para uma página básica, você precisa sempre incluir uma meta tag de janela de visualização. A janela de visualização é o componente mais importante para criar experiências para vários dispositivos. Sem ela, seu site não funcionará bem em um dispositivo móvel.

A janela de visualização indica para o navegador que a página precisa ser dimensionada para caber na tela. Existem muitas configurações diferentes que podem ser especificadas para a janela de visualização para controlar a exibição da página. Como padrão, recomendamos:

<meta name="viewport" content="width=device-width, initial-scale=1">

Experimente

A janela de visualização se encontra no cabeçalho do documento e só precisa ser declarada uma vez.

Aplique um estilo simples

Nosso produto e nossa empresa já têm diretrizes de fonte e marca específicas apresentadas em um guia de estilo.

Guia de estilo

Um guia de estilo é uma forma útil de obter uma compreensão de alto nível da representação visual da página e ajuda você a garantir um design totalmente consistente.

Cores

#39b1a4
#ffffff
#f5f5f5
#e9e9e9
#dc4d38

Adicione imagens estilísticas

Site projetado

No guia anterior, nós adicionamos imagens chamadas "imagens de conteúdo". Essas eram imagens que eram importantes para a narrativa do nosso produto. Imagens estilísticas são imagens que não são necessárias como parte do conteúdo principal, mas que agregam um impacto visual ou ajudam a orientar a atenção do usuário para um conteúdo específico.

Um bom exemplo disso é uma imagem de título para o conteúdo "acima da dobra". Esse tipo de imagem é frequentemente usado para incentivar o usuário a ler mais sobre o produto.

Elas podem ser muito fáceis de incluir. No nosso caso, ela será o plano de fundo do cabeçalho e a aplicaremos com um CSS simples.

#headline {
  padding: 0.8em;
  color: white;
  font-family: Roboto, sans-serif;
  background-image: url(backgroundimage.jpg);
  background-size: cover;
}

Nós escolhemos uma imagem de fundo simples que é desfocada e não desvia a atenção do conteúdo. Nós a definimos como cover para todo o elemento, para que ela seja sempre ampliada, mas mantenha a taxa de proporção correta.

Defina seu primeiro ponto de interrupção

O design começa a ficar inadequado em cerca de 600 pixels de largura. No nosso caso, o comprimento da linha ficará acima de 10 palavras (o comprimento ideal de leitura) e é isso que queremos alterar.

600 pixels parece ser um bom local para criar nosso primeiro ponto de interrupção, pois ele nos dará o escopo para reposicionar elementos para que eles caibam na tela. Podemos fazer isso usando uma tecnologia chamada consultas de mídia.

@media (min-width: 600px) {

}

Uma tela maior tem mais espaço, portanto, há mais flexibilidade para a exibição do conteúdo.

Observação: Não é preciso mover todos os elementos de uma fez. Você pode fazer ajustes menores se necessário.

No contexto da nossa página de produto, parece que precisaremos:

  • Limitar a largura máxima do design.
  • Alterar o preenchimento dos elementos e reduzir o tamanho do texto.
  • Mover o formulário para flutuar em linha com o conteúdo do cabeçalho.
  • Fazer o vídeo flutuar em torno do conteúdo.
  • Reduzir o tamanho das imagens e fazê-las aparecer em uma grade melhor.

Limitar a largura máxima do design

Nós escolhemos ter apenas dois layouts principais: uma janela de visualização estreita e uma larga, o que simplifica nosso processo de compilação de forma significativa.

Também decidimos criar seções com sangria total na janela de visualização estreita que permanecem com a sangria total na janela de visualização larga. Isso significa que devemos limitar a largura máxima da tela para que o texto e os parágrafos não se estendam em uma só longa linha em telas muito largas. Nós escolhemos posicionar esse ponto a cerca de 800 pixels.

Para isso, precisamos limitar a largura e centralizar os elementos. Precisamos criar um contêiner em torno de cada seção principal e aplicar um margin: auto. Isso permitirá que a tela seja expandida, mas o conteúdo permanecerá centralizado e terá um tamanho máximo de 800 pixels.

O contêiner será um simples div no seguinte formulário:

<div class="container">...</div>
<div id="section1">
  <div class="container">
    <h2>What will I learn?</h2>
.container {
  margin: auto;
  max-width: 800px;
}

Experimente

Alterar o preenchimento e reduzir o tamanho do texto

Na janela de visualização estreita, não temos muito espaço para exibir conteúdo, portanto, o tamanho e o peso da tipografia frequentemente são muito reduzidos para caber na tela.

Com uma janela de visualização maior, precisamos considerar que o usuário tem mais probabilidade de estar usando uma tela maior, mas a uma distância maior. Para aumentar a legibilidade do conteúdo, podemos aumentar o tamanho e o peso da tipografia, além de alterar o preenchimento para destacar mais áreas distintas.

Na nossa página de produto, aumentaremos o preenchimento dos elementos de seção ao defini-lo para permanecer em 5% da largura. Também aumentaremos o tamanho dos cabeçalhos para cada seção.

#headline {
  padding: 20px 5%;
}

Experimente

Adaptar elementos a uma janela de visualização larga

Nossa janela de visualização estreita era uma exibição linear empilhada. Cada seção principal e seu respectivo conteúdo foi exibida, em ordem, da parte superior à inferior.

Uma janela de visualização larga nos proporciona espaço adicional para exibir o conteúdo da maneira ideal para a tela em questão. Para nossa página de produto, isso significa que, de acordo com nossa IA, podemos:

  • Mover o formulário em volta das informações de cabeçalho.
  • Posicionar o vídeo à direita dos pontos principais.
  • Organizar as imagens em blocos.
  • Expandir a tabela.

Flutuar o elemento form

A janela de visualização estreita significa que temos muito menos espaço horizontal disponível para posicionar os elementos de forma confortável na tela.

Para fazer um uso mais eficaz do espaço em tela horizontal, precisamos romper p fluxo linear do cabeçalho e mover o formulário e a lista para que eles fiquem lado a lado.

#headline #blurb {
  float: left; 
  font-weight: 200;
  width: 50%;
  font-size: 18px;
  box-sizing: border-box;
  padding-right: 10px;
}

#headline #register {
  float:right;
  padding: 20px;
  width: 50%;
  box-sizing: border-box;
  font-weight: 300;
}

#headline br {
  clear: both;
}

Experimente

Flutue o elemento video

O vídeo na janela de visualização estreita foi projetado para ocupar toda a largura da tela e ser posicionado após a lista de principais recursos. Em uma janela de visualização larga, o vídeo será ampliado demais e parecerá incorreto ao lado da nossa lista de recursos.

O elemento video precisa ser removido do fluxo vertical da janela de visualização estreita e deve ser exibido ao lado da lista de tópicos de conteúdo em uma janela de visualização larga.

#section1 ul {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding-right: 1em;
}

#section1 video {
  width: 50%;
  float: right;
}

Experimente

Organizar as imagens em blocos

As imagens na interface de janela de visualização estreita (dispositivos móveis, em sua maioria) são definidas para ocupar toda a largura da tela e empilhadas verticalmente. Essas imagens não são dimensionadas corretamente em uma janela de visualização larga.

Para que as imagens fiquem adequadas em uma janela de visualização larga, elas são dimensionadas a 30% da largura do contêiner e dispostas horizontalmente (em vez de verticalmente, como na visualização estreita). Também adicionaremos raio de borda e box-shadow para que as imagens fiquem mais atraentes.

#section2 div img {
  width: 30%;
  margin: 1%;
  box-sizing: border-box;
  border-radius: 50% 50%;
  box-shadow: black 0px 0px 5px;
}

Experimente

Tornar as imagens responsivas ao DPI

Ao usar imagens, leve em consideração o tamanho da janela de visualização e a densidade da tela.

A Web foi feita para telas de 96 dpi. Com a introdução dos dispositivos móveis, observamos um aumento incrível da densidade de pixels das telas, sem falar nas telas de classe Retina em laptops. Dessa forma, imagens codificadas para 96 dpi frequentemente ficam péssimas em um dispositivo de alto dpi.

Temos uma solução que ainda não foi amplamente adotada. Para navegadores compatíveis, você pode exibir uma imagem de alta densidade em uma tela de alta densidade.

<img src="photo.png" srcset="photo@2x.png 2x">

Tabelas

É muito difícil de exibir tabelas corretamente em dispositivos que têm uma janela de visualização estreita e precisam de consideração especial.

Para uma janela de visualização estreita, recomendamos que você transforme cada linha da sua tabela em um bloco de pares de chave-valor (onde a chave é o elemento que era o cabeçalho da coluna e o valor continua sendo o valor da célula). Felizmente, essa não é uma tarefa difícil. Primeiro, anote cada elemento td com o cabeçalho correspondente como um atributo de dados. (Isso não terá efeitos visíveis até que adicionemos mais CSS.)

<tbody>
 <tr>
    <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
    <td data-th="Desktop share">32%</td>
    <td data-th="Table share">1%</td>
    <td data-th="Mobile share">67%</td>
  </tr>
  <tr>
    <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
    <td data-th="Desktop share">69%</td>
    <td data-th="Table share">13%</td>
    <td data-th="Mobile share">18%</td>
  </tr>
  <tr>
    <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
    <td data-th="Desktop share">69%</td>
    <td data-th="Table share">9%</td>
    <td data-th="Mobile share">22%</td>
  </tr>
  <tr>
    <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
    <td data-th="Desktop share">86%</td>
    <td data-th="Table share">4%</td>
    <td data-th="Mobile share">10%</td>
  </tr>
</tbody>

Experimente

Agora, basta adicionar o CSS para ocultar o thead original e mostrar os rótulos data-th usando um pseudoelemento :before. Isso resultará na experiência de vários dispositivos vista no vídeo a seguir.

No nosso site, precisamos criar um ponto de interrupção adicional apenas para o conteúdo da tabela. Ao compilar para um dispositivo móvel primeiro, é mais difícil desfazer estilos aplicativos, portanto, precisamos separar o CSS da tabela da janela de visualização estreita do CSS da janela de visualização larga. Isso proporciona uma interrupção clara e consistente.

@media screen and (max-width: 600px) {
  table thead {
    display: none;
  }

  table td {
    display: block;
    position: relative;
    padding-left: 50%;
    padding-top: 13px;
    padding-bottom: 13px;
    text-align: left;
    background: #e9e9e9;
  }

  table td:before {
    content: attr(data-th) " :";
    display: inline-block;
    color: #000000;
    background: #e9e9e9;
    border-right: 2px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 33%;
    max-height: 100%;

    font-size: 16px;
    font-weight: 300;
    padding-left: 13px;
    padding-top: 13px;
  }
}

Experimente

Conclusão

Se seguir essas diretrizes, você começará bem:

  1. Crie a IA básica e entenda seu conceito antes de criar o código.
  2. Sempre defina uma janela de visualização.
  3. Cria sua experiência básica com uma abordagem que prioriza os dispositivos móveis.
  4. Quando criar sua experiência de dispositivos móveis, aumente a largura da tela até que a aparência se degrade e defina seu ponto de interrupção nesse momento.
  5. Continue iterando.