Web design responsivo: abordagem mobile first com HTML5 e CSS3 | Danny Florian | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Web design responsivo: abordagem mobile first com HTML5 e CSS3

teacher avatar Danny Florian, KIT | Digital Marketing Agency

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

12 aulas (1 h 14 min)
    • 1. Introdução

      5:14
    • 2. Column de coluna de parte 1

      8:26
    • 3. Gradar em de coluna parte

      3:08
    • 4. Gradar em de coluna parte 3

      4:04
    • 5. Grama de coluna4

      5:03
    • 6. Parte de de coluna

      3:27
    • 7. Herói e três blocos

      6:06
    • 8. Como aplicar as consultas de mídia

      8:21
    • 9. Primeira abordagem em detalhe

      6:56
    • 10. Seção para iPhone

      8:10
    • 11. Flush Section (de borda para borda)

      10:52
    • 12. Rodapé

      3:48
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

2.328

Estudantes

12

Projetos

Sobre este curso

Não não não surde que há mais pessoas navegando na web em seus dispositivos móveis do que em desktops na paisagem digital de hoje. Neste curso, vou apresentar a primeira de móveis e mostrar as habilidades básicas para começar.

Vamos criar um site de responsivo do zero, o que você pode seguir com OU aplicar o que aprende a um site existente e a ver no seu dispositivo móvel.

Como usar o HTML5 e CSS3, você vai no caminho para a dominar o design de web de

Conheça seu professor

Teacher Profile Image

Danny Florian

KIT | Digital Marketing Agency

Professor

I'm Danny Florian, UX Designer and Founder of KIT Digital Marketing Agency. I started my career as a microbiologist and migrated from the world of microbes to the world of pixels, where I manipulate the DNA of websites and test hypotheses in order to design the best user experience.

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: Olá e bem-vindo esta introdução rápida sobre web design responsivo. Esta aula é especificamente para iniciantes que aprendem a programar. E vamos passar por tópicos como consultas de mídia e os fundamentos de mobile First ou a primeira abordagem móvel. Então meu estilo de ensino é direto ao ponto rápido. E se eu mudei para dois rápido, claro que é um trimestre de vídeo, então sinta-se à vontade para pressionar, pausar e retroceder e voltar para as instruções. Então sinta-se livre. Teoh, tire Screenshots do seu projeto e compartilhe com a turma. Podemos ver como você está progredindo e ver algumas coisas incríveis que você está construindo. Eu forneci o arquivo da loja de pés para isso. Este site fictício vai criar. Hum, se você não tem loja de fotos, eu forneci todos os bens já deslocados para cima. Então, se você for para o arquivo do projeto que eu forneci dentro das imagens, você obtém todas as imagens cortadas do arquivo da loja flutuante, então a loja de fotos não é necessária, embora seja altamente recomendado se você estiver indo para baixo Este este este campo de que design. Então vamos começar logo. Por que móvel? Primeiro, então a questão realmente é Por que devemos estar projetando ou focando principalmente ou iniciando um projeto na primeira mentalidade móvel? Basicamente, a razão é que você tem espaço limitado. Então, quando você tem um site, você sabe como uma tonelada de conteúdo, muitas imagens e quando você está navegando no seu dispositivo móvel, você tem um lado de tela limitado. Então, obviamente, tudo fica encolhido. Hum, você sabe, e se um site não é realmente projetado na primeira mentalidade móvel, os usuários estão rolando por horas para encontrar conteúdo que, você sabe, eles estão procurando por ele. Então essa é a razão número um, um, e então o argumento de apoio é bom, então se você está em um dispositivo móvel, você tem uma conexão mais lenta e limitada, então você não tem A, hum, eu acho que a capacidade de baixar imagens hi rez, você sabe, em movimento. Então, projetando em um celular primeiro ou desenvolvendo em uma primeira mentalidade móvel, você está pensando no usuário. Você sabe, antes, um, eu acho que mostrar todo o conteúdo, mas o conteúdo deve ser rei. E então nós íamos falar sobre aprimoramento progressivo, basicamente começando no nível mais básico, que seria o dispositivo móvel. E então, à medida que a tela aumenta para , você sabe , tablet e desktop, estamos adicionando elementos Mawr, como imagens ou animações especiais e coisas assim. E isso é baseado no conceito básico de aprimoramento progressivo. Estamos começando da forma mais simples e, em seguida, construindo sobre isso para dispositivos maior velocidade de processador, como seu desktop. Então esta é a tendência que eu não diria. Na verdade, é provavelmente a melhor abordagem ao construir um site hoje em dia, só porque mais pessoas estão navegando em seus dispositivos móveis. Então eu recomendo que você considere a primeira abordagem móvel, e eu vou passar em detalhes esta abordagem nesta classe, e então você pode tirar Você sabe o que você gosta, o que você não gosta e você vai ver. Há muitos tutoriais diferentes sobre Web design responsivo, e as pessoas fazem consultas de mídia de muitas maneiras diferentes. Mas eu acho que fazer isso dessa maneira, a primeira abordagem móvel, é a mais eficiente e segue o progresso do aprimoramento, hum, princípios. Espero que aproveite a aula de novo. Pegue o arquivo do Photoshopped que eu forneci. Você pode usar seu próprio projeto, ou você pode usar as imagens que eu forneci e começar a construir o site e acompanhar. , Mais uma vez, se você tiver alguma dúvida postada sobre a classe e eu vou me certificar de responder ao minuto de uma forma rápida. , Por favor, por favor, compartilhe seu trabalho. Quero ver o que estão construindo e compartilhar com a turma. 2. Column de coluna de parte 1: para entender o design Web responsivo, você precisa entender como o sistema funciona o sistema de grade. Então o que temos aqui é um sistema de grade de 12 colunas. Existem 10 colunas e 16 colunas sistemas de grade, mas isso realmente depende do seu design. Então o que temos aqui é um design que tem umterceiro ou três um blocos aqui de conteúdo. Outra seção, que parece ser um lado, é 50% disso com aqui, e então temos um completo com seção, e então temos uma seção aqui com cinco blocos de conteúdo. Está ocupando toda a largura da página e, em seguida, outra seção aqui, na qual temos mais cinco blocos de conteúdo. Mas está dentro de elementos que contêm. Assim, o sistema de 12 colunas funcionaria perfeitamente para isso porque 12 podem ser divididos em três igualmente, enquanto 10 não podem. Você pode usar a coluna 16, mas só fica, ah, um pouco mais complicado com a matemática, que eu vou mostrar aqui em segundo lugar. Então basicamente eu criei uma amostra simples de agora. Não é responsivo. É um pouco responsivo. Eu quero dizer isso. O conteúdo está se ajustando para a largura de do meu navegador aqui, mas isso é que não é realmente design responsável. Então deixe-me mostrar-lhe o cuidado básico do que está acontecendo. Então o que temos se você olhar para o código aqui é que temos este contêiner dentro do contêiner . Temos uma linha, e dentro da estrada temos essas duas colunas que ocupam 50% do espaço. Então vamos começar com o contêiner. O que um contêiner faz se voltarmos ao nosso projeto aqui. Quando ligamos as guias, o recipiente é basicamente a partir desta borda, esta borda esquerda para esta borda direita. Ele contém tudo isso, todo esse conteúdo dentro daquela quantidade especificada de espaço. Agora, se você for para esta seção aqui, ela vai de ponta a ponta. Não está dentro do contentor. Então, quando vamos para codificar esta seção, sabemos que não vamos usar a classe container. Mas para todo o resto, ele cai bem dentro deste contendo, uh, elemento. Então é isso que o contêiner está fazendo aqui. Então, se eu fosse me deixar mudar o meu deixe-me tirar minha largura máxima aqui e atualizar e você vai ver exatamente o que eu quero dizer. Portanto, o contêiner não existe mais, e está apenas tomando 50% do espaço do navegador. Não está sendo contido dentro daquele espaço de 1200 pixels, que eu tinha anteriormente lá. Então, quando você define seu contêiner, você está definindo um máximo permitido com, então ele está no máximo, certo? Há 1200 pixels e ali está encolhendo. Agora, eu quero que você note outra coisa. Você vê isso, esta borda bem aqui desta maneira recipiente dar-lhe uma ordem cinza escuro sólido de 20 pixels. Então, se começarmos a reduzir isso, o que vai acontecer é que a borda direita vai desaparecer. E se você olhar para o meu pergaminho, hum, opção, ele aparece lá em cima, minha barra de rolagem aparece. Então isso é algo que eu vou falar aqui em um segundo. E é uma solução rápida e fácil. E é algo a ter em mente ao construir sua grade, então a próxima parte é a estrada. Então, se você pensar, deixe-me voltar para esta imagem aqui. Então, quando você pensa em colunas geralmente pensa em tabela então dentro de uma tabela você tem, hum, essas colunas verticais são que estão contidas dentro das estradas horizontais. Então é exatamente isso que estamos fazendo aqui. A linha é o contêiner horizontal para essas colunas. Então, dentro de uma linha você tem X número de colunas. Isso é tudo que a fila está fazendo. E depois descemos a cada coluna. Então nós temos essa aula de def com azul só para o Becker e soprou para a classe com verde , e nós demos esta aula. Ver óleo Dash 6, coluna seis. Então, neste sistema de 12 grade, um, apenas usando o senso comum aqui, chamar essa classe que eu dei de c o L Dash seis basicamente significa para mim que ele ocupou seis colunas de espaço. Então, se voltarmos aqui e, hum, nós voltamos para o que realmente está sendo identificado na propriedade aqui vemos que a largura é definida como 50% para a classe Coluna 6. O que faz sentido. Obviamente, você sabe, se nós temos um sistema de 12 grade metade de 12 é seis. Então, é claro, queremos dar seis colunas a largura de 50% que é 50% de 12. Então vamos repassar algumas outras contas aqui então vamos dizer que eu quero dar, hum estes terceiro. Então eu vou copiar isso. Há, uh, esta coluna seis. E agora vamos mudar isso para C. L. Dash 4. E a razão é, você pode dividir 12 em três, igualmente pela força ou obviamente 12 cerca de 34 Então, se nós realmente frescos, obviamente não vamos conseguir os terços iguais porque eu não tenho identificou-o aqui no meu CSS. Então vamos em frente. Eu só vou mudar isso aqui, Teoh 1/3 e nós vamos descobrir o que 1/3 é de 12. Então, se abrirmos nossa calculadora e você fizer, hum se nós precisarmos de uma coluna três então três dividido por 12 Eu sinto muito, isso é para então nós temos quatro colunas foram novamente, Lembre-se, nós estamos fazendo isso por colunas, não pela matemática real do que você precisa. Então, mesmo que precisemos de três elementos de bloco estavam usando quatro colunas para conseguir isso, porque obviamente 12 sobre ele antes é três. Então lembre-se que isso está saindo do número de colunas, não do número de elementos que você precisa. Então, vamos voltar para a nossa calculadora aqui. É quatro dividido por 12. Vai dar-nos cerca de 30%. Então, é 33.33333 Então, para tornar isso mais fácil, então basta, você sabe, você pode vezes cerca de 100 e 33.3333%. Então, se eu voltar para o meu CSS e eu criar esta chamada esta coluna quatro, ele precisa de uma largura de 33,333 E o que eu vou fazer é voltar. Vá para o oitavo lugar pequeno, você sabe, e você vai ver o porquê. Aqui em um segundo, vamos apenas adicionar 33,333% e apenas atualizar a tela aqui. E você vê que ele ocupa o terço deste, uh, contendo, hum , , espaço para os pais. Agora, uma coisa a notar é que eles não estão alinhados um ao lado do outro, e é aí que entra o carro alegórico. Então, para cada coluna, nós sempre queremos flutuá-las para a esquerda, e isso vai nos dar exatamente o que você vê para ver essa última. Deixe-me mudar isso para azul. Lá vamos nós. Então, cada um é ocupado 1/3 desse espaço permitido. 3. Gradar em de coluna parte: No vídeo anterior, passamos sobre como criar uma coluna para 1/3 do espaçamento disponível. Então o que eu criei aqui é uma coluna quatro em uma coluna. Seis. Então, em outras palavras, há quatro colunas dentro deste bloco de conteúdo e seis dentro daqui. Então, se você teve o mês matematicamente, nós só temos 10. Deixe este espaço de dois aqui. Então, se você não entende isso, apenas pense nisso assim. Então 100% desse espaço significaria que usamos 12 colunas. Então, neste exemplo, o que estamos fazendo é que estamos usando quatro colunas e seis colunas, o que soma até 10. Então fazemos quatro colunas que terminam aqui. Se fizermos mais seis colunas 123456 eram apenas um 10. O que nos deixa mais calmos. Então, matematicamente falando, o único espaço permitido aqui depois desta coluna seis seria duas colunas. Então, se adicionarmos isso e atualizarmos a página, você verá que temos esse espaço aqui agora. Não criei esta classe de coluna para voar. Basta fazer isso agora, então cl traço para, e nós precisamos descobrir a largura, e nós sabemos que ele precisa flutuar para a esquerda. Então vamos em frente e descobrir a inteligência. Então, novamente, este é um sistema baseado em coluna. Então estamos usando duas colunas então duas divididas pela quantidade total de colunas apenas 12 vai nos dar 16 0,6667%. Então vamos fazer isso. E como eu disse, vamos para a oitava casa decimal de 16 pontos 666666 67 por cento. E se voltarmos ao nosso exemplo e atualizarmos, você verá que ele preenche bem. Então nós mudamos. São dois blues que podem ver o contraste, e aí está. Então, novamente, o conceito para levar para casa aqui ou o princípio para levar para casa aqui é para cada linha que você tem, certifique-se de que o número de colunas é igual ao número total de seu sistema de grade de coluna que você está usando. Então, se eu estivesse usando sistema de grade de 16 colunas, obviamente, o que eu tenho aqui seria apenas 12. Preciso de outra coluna quatro para preencher esse espaço. Mas uma vez que estamos usando um sistema de grade de 12 colunas para seis é 10 mais outro para o seu 12 e você pode continuar a construir este sistema de grade de crédito ao ponto que você pode usar. Chame-os 12 vezes coluna 34 vezes e assim por diante, e isso é basicamente o que você é sistema de grade é composto. 4. Gradar em de coluna parte 3: Agora que descobrimos como construir nosso sistema de grade usando as colunas, precisamos descobrir as propriedades CSS de suporte para corrigir alguns desses problemas que estamos tendo. Agora que descobrimos como construir nosso sistema de grade usando as colunas, precisamos descobrir as propriedades CSS de suporte para corrigir alguns desses problemas que estamos Então, a primeira edição foi nomeada em um vídeo anterior é como este contêiner tem essa borda cinza de 20 pixels. E à medida que começamos a diminuir o tamanho do navegador, vemos que ele sai da página e temos que rolar para a direita para ver esse pedido. Então o que está acontecendo aqui é que nós temos um contêiner com ah, largura variável ou fixa aqui, e nós estamos adicionando em cima dele, mais 20 pixels. Então, esses 1200 pixels na verdade se tornam 12 40 porque estamos adicionando 20 pixels aqui, 20 pixels aqui, então ele está realmente excedendo esse espaço que estamos dando a ele. Então precisamos fazer é, na verdade, precisamos adicionar uma propriedade nesta propriedade é realmente chamado parques de dimensionamento e a propriedade CSS que vamos dar-lhe é realmente ordem caixa de traço. Então, se você atualizar a página, vemos agora que essa ordem certa vai manter ou permanecer dentro disso dentro do nosso espaço aqui, então o mesmo conceito vai para essas colunas. Estas colunas têm um FIC eles têm eles não têm um fixo com, eles têm realmente uma variável com. Então este 50% é diferente em largura total aqui do que é aqui. Obviamente o que você pode ver, por exemplo, aqui esta coluna quatro. Ele está diminuindo de tamanho à medida que ficamos menores, então a largura é definida para ser um máximo de 50%. Mas é 50% do espaço permitido que continua encolhendo se descermos assim. Então, precisamos adicionar este tamanho caixa para todas as nossas colunas e qualquer tipo de elemento que é que estamos adicionando que estamos adicionando margens ou preenchimento é também. Então, deixe-me dar um exemplo aqui. Então, se formos chamá-lo de quatro e adicionar, deixe-me remover esta caixa izing. Digamos que adicionamos uma borda à direita para que os direitos de borda dêem 20 pixels sólidos e vamos fazer o mesmo cinza. Então, se fôssemos os primeiros a página, você vê que isso empurrou para cima chamá-lo, também. E a razão é esta. Venha quatro agora excedendo este 33.333% que lhe demos. Este extra de 20 pixels está a torná-lo maior do que isto, esta largura que lhe demos. Então, quando é por isso que precisamos do tamanho da caixa. Então, se adicionarmos de volta e atualizarmos a página, teremos magia. Então, o que o tamanho da caixa faz? É isso? Basicamente, aplica-se isto, esta ordem de preenchimento extra ou margens ou o que quer que seja que vai adicionar à largura do que quer que seja. Seja lá o que for a que estás a adicioná-lo, está a adicioná-lo dentro. Então, novamente, se removermos isso e atualizarmos a página, você pode ver que ela aumentou com isso. Esta ação, esta borda de 20 pixels à direita, está sendo adicionada à parte externa desta coluna quatro. E se colocarmos caixa de ordem de dimensionamento de volta e atualizar a página, isso é 20 pixels ser adicionado dentro deste 33,33%, então espero que isso faça sentido para você. É um conceito muito fácil do que é, e é algo que, enquanto você está construindo sua grade, você precisa se lembrar da caixa de pedidos oxidantes 5. Grama de coluna4: Tudo bem. Então, a última propriedade CSS que eu quero revisar é limpar seus carros alegóricos e como fazer isso com CSS. Então, basicamente, o que notamos ao construir nosso sistema de grade é que cada coluna está flutuando para a esquerda. Quero dizer, essencialmente que temos que fazer isso para que eles se alinhem um ao lado do outro. Se não o fizermos, eles se acumulam um sob o outro. Portanto, limpar o fluxo para estão descobrindo uma maneira muito boa de limpar seus carros alegóricos é essencialmente web design responsivo. Então a maneira como você faz isso é nossa linha é basicamente alcançar isso pela propriedade CSS que eu dei a ele overflow oculto. Então, se removermos essa propriedade CSS e atualizarmos nossa página, você pode ver que nosso contêiner agora, que é esse, uh, esses 20 pixels de cinza escuro. Ele entrou em colapso, e a razão pela qual ele está fazendo isso é porque os contêineres segurando a linha a linha tem três colunas. Esses três pentes estão flutuando, então quando você tem um elemento flutuante, o contêiner pai não sabe a altura ou a largura dos elementos flutuantes porque eles estão flutuando. Então o que, você quer fazer é limpar seus carros alegóricos. Agora traz o passado que as pessoas têm. Eles fizeram uma técnica semelhante a esta que criou um dia de dar-lhe uma classe de clara e apenas fechar o Dev e chamou-lhe um dia. Bem, você sabe que isso fica realmente cansativo muito rápido quando você tem que repetir este código em todos os lugares que você está flutuando que você está flutuando elementos, então a maneira mais fácil de fazê-lo é aplicá-lo à sua linha. Como eu disse, essa classe transborda. Se atualizarmos o nosso pago, você vê que o recipiente 30 anos fora da altura e se envolve bem em torno do conteúdo. Essa é uma maneira de fazer isso. Outra maneira que você verá é que as pessoas realmente usam um pseudo elementos de linha antes e escreveu depois para que você possa fazer linha antes de uma propriedade de anúncio CSS de Clear Oh, Sinto muito do conteúdo e vamos mantê-lo vazio agora e exibição de tabela. Então, se nós atualizarmos nossa página, você verá que isso não está acontecendo porque nós temos que realmente incluir a mesma coisa, mas para depois Então copiar isso é que ela está aqui para depois. Oh, e eu realmente sinto falta do construído antes. Lá vai você. Certo, então o que isso faz? É realmente adicionando, Deixe-me realmente colocar algum continente aqui. Ok, então essa coisa, essa pseudo-classe de antes e depois é exatamente o que está fazendo antes da fila. É adicionar este conteúdo e depois da estrada, adicionando este conteúdo e você está basicamente limpando o carro alegórico. Dessa forma, o contêiner, que é o pai que contém a linha, descobre a altura por causa desta estrada antes de uma fileira. Depois de agora, você pode fazer isso. De qualquer forma, todos eles têm seus prós e contras. Se você fizer do jeito que eu falei com Teoh, que está escondido, então o que acontece é se você precisar de conteúdo. Então vamos dizer que eu queria empurrar este texto para fora desta linha e ainda mostrar bem, usando este estouro de método oculto, ele não faria. Então é quando eu usaria esse método, obviamente, tem que planejar e projetar qual caminho é melhor. Mas, obviamente, se você tem que empurrar o conteúdo inicial e você quer mostrá-lo, talvez você devesse estar repensando como você está fazendo sua marcação. Então, mais uma vez, limpar seus carros alegóricos realmente fácil. Basta aplicá-lo à linha, que contém a coluna, que você nunca mais queira usar as colunas sem a linha novamente. Isso está voltando ao nosso sistema de grade e pensando em termos de linhas e colunas. Portanto, tenha isso em mente Enquanto você está construindo sua grade, certifique-se de que você quer aplicar estrada antes na linha. Depois com a tabela de exibição e conteúdo. Basta mantê-lo vazio ou usar este transbordamento escondido para que seja com você. Cada um tem seus prós e contras e brinca com ele. Veja o que você precisa dele para, Mas na maioria das vezes, usando estouro escondido na linha vai levá-lo muito longe. 6. Parte de de coluna: Tudo bem. Então eu fui em frente e construí meu e terminei meu sistema de audição aqui. Como pode ver, numerei todas as colunas. De acordo com a classe CSS que estou usando. Então fazendo as contas, você pode ver que seis e seis são 12 55 a 12 4 vezes três é 12 3 vezes 4 é 12. Basicamente, apenas certifique-se de que cada linha termine até 12. Aqui está a minha última fila. Ele está usando a Coluna 12 ocupa uma largura de 100%. Então sinta-se livre para usar a folha de estilo CSS que eu forneci. Ele deve ter todas essas propriedades CSS para cada coluna basicamente figura que eu descobri a matemática para cada coluna. Então ligue para a cidade e 83,33% chame-o 11 e assim por diante, então sinta-se livre para usá-lo. Mas eu desafio você a ir em frente e tentar fazer as contas e repetir o que eu fiz aqui , fazer seu sistema de grade. Então agora você deve ter é como você reduz o tamanho de sua janela aqui, um, um, você deve ver que cada coluna leva que a porcentagem, a quantidade correta de espaço, então, por exemplo, esta coluna seis ainda está tomando 50 50. Mesmo que estejamos no menor tamanho de janela aqui, então você sabe que é. menor tamanho de janela aqui, Não é uma resposta do que chamamos de padrões de hoje, mas é responsivo no sentido de que não é um fixo com sites estáticos que são construídos em, você sabe, 1997. Eles não consertaram o que quer que seja 968 e como você começa a reduzir a janela, você vai ter que rolar para a esquerda e para a direita. Você sabe que isso pelo menos se ajusta à porcentagem. Ajuste a porcentagem da coluna para a janela tão desafiadora para ir em frente e terminar seu sistema de grade. Continuar o que estávamos fazendo. Lembre-se de que cada linha precisa de cima. Precisa somar até 12. Então, enquanto você continuar, aqui está minha linha com, com todas essas colunas terminando até 12 e é realmente simples. Basta manter o sistema de grade separado do estilo. Você sabe que este é o seu andaime, então você não quer incluir a cor azul para a sua coluna, também, Então certifique-se que separar que essas classes separadas ar. Então é por isso que temos a classe azul que dá que dá à coluna a cor de fundo azul e é separado da coluna. Este é o seu bom sistema. Então você não quer o Teoh? Hum, você sabe, inclui estilos que estão relacionados ao design. É mais o seu quadro. Você sabe, nós estamos apenas falando sobre colocação com e assim por diante. Então, Então, vá em frente e termine seu sistema “Você é bom”. Faça uma captura de tela. Se você estiver em um Mac, faça a mudança de comando três ou quatro Se você estiver em um PC. Tenho certeza de que há uma opção de captura de detela no teclado para fazer uma captura de tela. Coloque-o na classe para a classe ver e vamos pouco, bonito estes, uh, uh, sistemas de grade são. 7. Herói e três blocos: Certo, então vamos ver este sistema de grade em ação. Então o que você vê aqui é apenas marcação simples. Eu não fui muito longe aqui, só tenho as duas primeiras seções, o herói e depois os três quarteirões aqui. Então, se olharmos para o que está acontecendo, se ligarmos o intestino, os guias aqui vemos que tudo está contido dentro do recipiente, exceto esta seção aqui, que vamos chegar em um momento. Então vamos começar adicionando primeiro o contêiner a esta navegação. Como você pode ver, é muito que é apenas nivelado contra as bordas do navegador, o que não é. Não é isso que queremos dividir o café. Então, depois que você criou seu sistema de grade. Se você estiver usando o seu próprio, apenas certifique-se de que você está vinculado a ele através do seu estilo. Ela, como você pode ver, eu estou ligando Teoh folha eu mesmo. Isso está dentro do suporte CSS, e é chamado de CSS de ponto principal. Então, se abrirmos isso, você pode ver que eu já colei o sistema de migração no qual ele estava trabalhando anteriormente, que é bem aqui, contém uma linha e todas as 12 colunas dentro do meu arquivo CSS de ponto principal, então apenas certifique-se de que seu recipiente tem a margem direita. Zero superior da parte inferior esquerda e direita é auto, por isso centra-se em si mesmo. Há um bom tempo também para eu dar-lhe uma largura máxima. Então vamos em frente e aplicar este recipiente dentro de nossos elementos naff. Então vamos dar uma classe de contêiner. E como você pode ver agora nós atualizamos você tem aquele bom, hum, 1200 pixels máximo com o seu Então, o próximo, hum, dentro do contêiner. Se você se lembra do nosso exemplo, o que eu estou fazendo aqui com a minha marcação. Se eu olhar para esta marca neste menu na minha folha de estilo, eu estou flutuando a marca para a esquerda e o menu para a direita. Então isso é algo que queremos esclarecer com a nossa linha. Como você se lembra mais cedo. Aqui está. Marca flutuar esquerda e menu flutuar. Certo. Então, se você se lembrar do nosso exemplo, sempre que você tem algo flutuante que você quer, você quer contê-lo dentro da estrada para limpar o carro alegórico. Então eu vou dar a isso uma classe de ovas tão frescas que você pode ver. Este menu agora é dado altura Então, esta próxima seção sabe onde esta navegação termina por um plano que linha e limpando nossos carros alegóricos. Então vamos passar para a próxima seção. Temos estes três blocos que precisam ser três basicamente 1/3 e largura deste, 100% com do recipiente. Então, se você se lembrar do nosso exemplo, precisamos usar a coluna quatro, uma vez que a coluna quatro termina até 12. Então, se voltarmos à nossa marca aqui nesta seção, , queremos que o Teoh meta esses três blocos que estão embrulhados com esta seção de ícones de classe. É aqui que mantemos o estilo separado da estrutura. Portanto, não queremos adicionar os estilos a esta coluna. Quatro classes. Queremos mantê-la separada. Então é por isso que temos essa marcação diferente para esta seção. Então, se aplicarmos essa classe de piso de coluna, Teoh cada um desses blocos e desde que já salvamos e colamos nosso sistema de grade em nosso CSS, quando atualizamos, obtemos magia. Então lá vamos nós. Temos três blocos iguais 1/3. Então uma coisa que você percebe é que nós não aplicamos o recipiente então aqui está a soneca. Com os contêineres, você pode ver que ele está segurando o máximo de 1200 pixels com, mas esses blocos não estão. Então vamos em frente e isso. Então, dentro desta seção, temos uma classe de contêiner dentro do contêiner. Temos a classe de linha para limpar os carros alegóricos. Se nós atualizamos isso mais uma vez, nós estamos recebendo aquele bom elemento contendo lá. Então, uma coisa que eu quero que você perceba também é em certos pontos, como ali mesmo. Você vê que cada bloco está se tocando, você sabe, esfregando um contra o outro. Então isso é algo que você quer considerar ao fazer seu, hum, seu sistema de grade é Você quer aplicar o preenchimento diretamente para as colunas? E na maioria das vezes você vai encontrar essa estrutura como Twitter, bootstrap, ou há uma base que eles realmente aplicam preenchimento para a coluna. Então, cabe a você, eu diria. Vá em frente e faça isso só porque é como construir com Legos. Você sabe, toda vez que você usa essas colunas, é mais provável que você queira o conteúdo. Então, neste caso, estas marcas de parágrafo não devem ser tocadas. Então, só para poupar algum tempo aqui. Vou aplicá-lo aos que estamos usando, o que está pedindo agora. Então, só para dar um exemplo rápido, estamos brincando ou acolchoando. Então, apenas nos lados, eu quero dar um 20 pixels. E se atualizarmos, você pode ver que há um preenchimento de 20 pixels no meio ou no lado nas bordas dessas caixas. Então, se o aproximarmos assim, você pode ver que mantém esse acolchoamento longe um do outro. Então, no próximo vídeo, hum, eu vou ver o celular primeiro e como preparar o resto desta página daqui para frente. 8. Como aplicar as consultas de mídia: Então, agora que adicionamos nossa classe de coluna três a esses três blocos, vamos falar sobre a primeira abordagem móvel. Então, se fizermos este navegador sobre o menor é que ele pode ir, que é isso aí Você pode ver que isso realmente não parece tão grande. Então, como consertamos isso? E é aí que a magia entra em jogo. Então, primeiro de tudo, vamos falar sobre consultas de mídia para que as consultas de mídia é onde a magia acontece . Então, se eu for aqui e fizer uma consulta de mídia básica, então na mídia e se eu puder, eu posso realmente segmentar certos tipos de mídia. Assim, por exemplo, eu posso segmentar apenas telas ou apenas dispositivos portáteis ou dispositivos de impressão, ou posso segmentar todos, o que é uma opção aqui. Então, se você quiser segmentar tudo o que você pode fazer tudo, você pode digitar tudo, ou você pode realmente excluí-lo, e por padrão ele inclui tudo. Mas se você quiser fornecer certos estilos que se aplicam a, digamos apenas para impressão, este é o momento de fazê-lo. Então, neste caso, eu vou apenas mantê-lo simples e fazer tudo o que você é bem-vindo para ler a rede de desenvolvedores Mozilla e ver todos os diferentes tipos de mídia. Então, aqui ele vai sobre em detalhes as opções de impressão, tela e até mesmo voz e algumas outras coisas que você pode segmentar, como densidade de pixels. Portanto, se você quiser segmentar apenas dispositivos com o dobro da densidade de pixels, como dispositivos retina , você pode fazer isso com consultas de mídia. Mas neste exemplo, só vou manter isso simples. Então, minha consulta de mídia básica é na mídia todos os dispositivos ou todas as telas e, em seguida, eu faço e parênteses. E é aqui que você tem duas técnicas diferentes. A primeira abordagem móvel usa apenas homens, e as outras abordagens que você vê um todo mundo fazendo, eles fazem uma combinação de Max e mítica homens com. Então vamos apenas fazer um mínimo com off 600 pixels e abrir e fechar Curly. E é isso. É assim que você configura a mídia. Ótima. Então o que eu vou fazer aqui, já que estamos usando a coluna quatro para esses blocos, eu vou apenas tirar isso daqui, então eu vou apenas cortar isso e colá-lo dentro desses colchetes dentro desta paz de consulta de mídia que lá dentro como assim não foi bem, e se eu atualizar, eu posso ver que nada acontece imediatamente. E a razão é porque essa, hum essa consulta de mídia só vai acontecer. Deixa-me mostrar-te bem rápido. Então, se houver outro truque que você deve aprender com o Google Chrome, temos uma opção aqui. Se você acessar essas configurações e, em seguida, certifique-se de que as réguas de exibição estão marcadas, há um pequeno truque legal. Então, quando você redimensionar o navegador, olhar para as réguas aparecem e no canto superior direito, Você começa a ver o tamanho da porta de exibição atual. Então o que vai acontecer é a minha consulta de mídia um conjunto de 600, no mínimo, com 600. Então isso significa que enquanto qualquer coisa, desde que meu navegador ou que a tela do dispositivo seja maior que 600 pixels, se for verdade, ele fará tudo dentro disso para aplicar uma largura de 33,33%. Então, se continuarmos a dimensionar esta janela, você vê que estamos chegando perto de 600 foi 900 assim que atingirmos 600 você vai ver o que acontece aqui. Boom. Assim que você acertar 600 você perde este estilo. Então, como o navegador está lendo, isso pode não arquivo CSS. Está indo para baixo na lista. Então está lendo tudo isso. Ele está lendo tudo isso, e há coluna quatro Bem, coluna para está aqui, mas ele não pode lê-lo porque ele retorna false quando ele lê esta media query. Então, quando ele lê esta consulta de mídia Sim, no dispositivo de tela. Então tudo está sob isso, e então quando ele vê essa largura média de 600 pixels, é como, whoa, ok, hum, hum, abaixo de 600 pixels. Eu estou em 5 77, portanto, isso retorna falso, e ele não pode ler este estilo. Então pense nisso, se tivermos. Se a primeira abordagem móvel é esta, se não precisamos aplicar um estilo com o tamanho de tela mais simples, em outras palavras, o menor tamanho de tela não precisamos usar um estilo, então não usá-lo. Lembre-se, os dispositivos deste tamanho não têm um processador mais rápido do que um computador desktop, por isso é realmente mais eficiente. E é uma experiência de usuário melhor. Então, novamente, qualquer coisa acima de 600 isso retorna verdadeiro, ele aplica este estilo para o nosso bloco de coluna quatro, que são estes aqui e qualquer coisa abaixo de 600. Não o aplica, e é por isso que você obtém esse empilhamento. Então este é o nosso primeiro ponto de ruptura, e podemos continuar a fazer esses pontos de quebra. Então vamos fazer na Media Paul e no próximo ponto de ruptura. Vamos fazer 10 24. Então homens com 10 24 e abrindo colchetes e então vamos adicionar outro. Então vamos apenas copiar e colar para economizar algum tempo aqui. E vamos mudar este último 1 para 12. 80. Então, como podem ver, estamos começando a desenvolver um sistema aqui. Basicamente, enquanto estou criando este site, você sabe, eu vou ter que decidir como cada ponto de ruptura vai se parecer. Então, se, como você pode ver aqui, tudo está sendo contido dentro deste recipiente, e enquanto ele é realmente longo, eu poderia querer mudar meu estilo. Então você vai ter que encontrar sintonizar este ar, meus principais pontos de ruptura e um monte de desenvolvedores, hum, e designers vão te dizer que, você sabe, aderindo a você sabe, seu 7 68 Que é o seu iPad, hum, 10. 20 quatros. Paisagem iPad. Você sabe, isso é muito que você está aderindo a dispositivos. Você não está aderindo a nenhuma abordagem responsiva ou agnóstica. E Aziz, notou que conhece esse conteúdo? Sim, parece bem, , mas precisa respirar um pouco. Então, talvez a 700 pixels, nós podemos querer que eles ainda sejam inteligentes. Então é com isso que você tem que brincar e usar seu julgamento aqui. Então, você sabe, a 600 pixels, isso parece que isso parece uma espécie de abóbora. Então, você sabe, um, eu realmente quero aumentar este primeiro 1 para, você sabe, 7 68 E se eu atualizar você vê que 600 pixels, ele ainda está cheio, e na verdade não vai para o terceiro até que exceda 768 que está bem ali. Então, na verdade, isso é um pouco melhor. Então vá em frente e aplique esta técnica ou esta abordagem ao seu arquivo CSS. Se estiveres a seguir, dou-te um momento para rever este vídeo e ver o que acabei de fazer. Espero que faça sentido no próximo vídeo. Vou explicar mais detalhadamente 9. Primeira abordagem em detalhe: agora que temos nossas mãos deixar com a primeira abordagem móvel vai entrar em mais detalhes sobre esta abordagem. Então vamos olhar para o cabelo de tamanho de tela mais simples ou menor. Então, há um pequeno segundo para ir. Neste momento, tem 400 pixels de largura. Então, se você notar que há um espaçamento aqui em cima e você sabe, digamos, no telefone, você sabe, você sabe, a altura da minha tela pode realmente estar em algum lugar como ao redor, você sabe, um pouco mais de espaço bem ali. Então estamos cortando isso. Você sabe que esta chamada à ação aqui. Então o que eu quero fazer é que eu quero que Teoh mude meu estilo que eu comecei de novo para a morte. Pare, porque esta é a vista do telefone. Esta é a menor porta Vieux que eu tenho, e eu quero mudar esse estilo. Então, se olharmos aqui, esse elemento é na verdade meu cada um dentro do meu chamado à ação. Então, se eu mudar para a minha folha de estilo aqui, você pode vê-lo aqui chamado para a ação 81 Então esta é a peça que eu preciso trabalhar com. Então, como você pode ver, o tamanho da fonte é enorme, e eu preciso reduzir isso um pouco. A chamada à ação em si tem tapinhas no topo que eu preciso reduzir. Então o que eu vou fazer é começar com o chamado à ação. Então eu vou apenas copiar isso e ir para a media query que eu comecei aqui. Agora você pode Você não tem que incluir, você sabe, você sabe, cada consulta de mídia, hum, contra, como, como, bem sob, hum, hum, tudo que você pode, você sabe, você pode incorporá-lo em todo o seu CSS. Então eu acho que o que eu estou tentando dizer é, se eu quisesse começar outra carreira de mídia aqui com as mesmas, hum, com as mesmas propriedades desta consulta de mídia aqui com a largura mínima de 768 eu não poderia fazer isso. Eles não vão entrar em conflito a menos que os elementos dentro dele sejam exatamente os mesmos que você diz . Então o último entraria em vigor contra o que veio mais cedo. Então o que eu vou fazer é apenas para manter isso realmente simples. Aqui está no final dessas seções aqui que eu tenho, hum, hum, delineado. Eu vou incluir, hum, uma consulta de mídia então só vou fazer a consulta de mídia aqui e eu fiz 768 e eu vou acelerar isso. Aquele trecho de chamada à ação. Agora, uma coisa que eu quero que você note aqui é OK, isso é exatamente o mesmo. Então por que, Por que me repetir? Então o que eu tenho que fazer aqui é ter que pensar, Ok, que estilos precisam ser aplicados nesta menor porta vieux? Então, se eu estou fazendo um estilo que precisa repetir em todos os aeroportos, então ele precisa estar aqui fora Se eu quiser um estilo que só precisa ser aplicado a essa porta de visualização específica e precisa ir com ele na consulta de mídia. Dito isso, sim, eu quero que as cores sejam brancas, você sabe a importação. Então eu não preciso disso porque ele já está fora desta linha texana de consulta de mídia também. A única coisa que preciso de um alvo, na verdade, é apenas o estofamento. Então, batendo no topo. Eu quero que ele tenha 100 pixels e qualquer coisa acima de 768 pixels. No entanto, nesta menor visão, que é o primeiro celular que se lembra, é isso que isso é. Estes são os estilos que os dispositivos móveis lêem primeiro. Então ele vai para baixo nesta lista e está lendo tudo isso. E imagine se tivéssemos que anular tudo o que ele lê. E, em seguida, quando chegar a esta mídia criada. Então, se essa consulta de mídia waas para um dispositivo móvel, então nós iria substituir tudo o que ele acabou de ler, que é um desperdício de recursos. É uma corrida, um desperdício de processador. É por isso que a primeira abordagem móvel funciona tão bem. É que todo esse código que está sendo todo o CSS que está sendo lido pelo dispositivo móvel é realmente destinado para o dispositivo móvel e, em seguida, tudo em sua consulta de mídia aqui. Isso é para qualquer coisa como um desktop, que tem um processador melhor e mais espaço do que ele pode lidar com isso. Ele pode ler isso e substituir os estilos. Ele só leu mais cedo. Então esse é todo o propósito da primeira abordagem móvel. Então vamos ver isso em ação aqui. Então, como eu disse, isso é acima de 7 68 Nós queremos que ele tenha um preenchimento de 100 pixels no topo, que é este espaçamento bem aqui. Mas no meu dispositivo móvel, digamos que eu queria ser metade disso. Então, na minha chamada à ação batendo no topo, digamos que eu queria ter 50 pixels. Então, se eu atualizar a tela, você pode ver que ela subiu um pouco de 50 pixels. A próxima coisa que quero atingir é isto. Cada um aqui, a receita, é simplesmente muito grande para dispositivos móveis. Só vou copiar e colar. Isso é chamado de Ação H um e na minha consulta de mídia logo abaixo desta primeira classe vai alinhá-lo muito bem. Certifique-se de que está tudo recuado corretamente e novamente. Queremos que as margens e no fundo da margem permaneçam na mesma linha. A altura vai ser a mesma outra vez. assim que eu queria ser. E em qualquer dispositivo ou qualquer tamanho de tela maior que 7 68 O problema está aqui. Isto é para os meus dispositivos móveis, então eu quero que este o tamanho da fonte seja menor, Então vamos fazer metade anunciado o 35 Exel. Devemos mudar a altura da linha para algo em torno de 40 e quando nós atualizar. Se você manter o olho no lado direito da tela Lá, você vê que ele produz. Então esta é exatamente a mentalidade que precisamos ter quando estamos desenvolvendo. Basicamente, pense móvel primeiro como seus dispositivos móveis lendo este código, você quer que ele seja destinado para o dispositivo móvel. Então, se uma área de trabalho estiver lendo isso, que tem maior poder de processamento, tudo bem se precisar sobrescrever tudo o que acabou de ler. Quando atinge esta consulta de mídia aqui e lê tudo dentro, ele tem o poder de processamento para substituir tudo o que acabou de lembrar. Quero dizer, esse é todo o propósito do celular. First Is está usando, Ah, esta idéia de salvar recurso é e maximizar a experiência do usuário. 10. Seção para iPhone: Certo, agora vamos para a terceira seção. Então, como você pode ver aqui já tem a marca para cima. Deixa-me mostrar-te. Aqui eu tenho outra seção com um recipiente uma linha e duas dessas colunas. Seis, que é 50%. Então esta esquerda é tomada em 50%. E isso é certo quando ele é retirado 50%. Então, como você pode ver, isso realmente foi flush. Deixa-me mostrar-te os estilos que adicionei na grelha. Então, coluna seis. Adicionei um preenchimento à esquerda e à direita de 20 pixels. Então deixe-me remover isso. Você pode ver como eu estava parecendo para que você possa ver Não muito ruim. Mas o estofamento estofamentoé necessário assim como fizemos aqui. Então, quando eles se aproximam, você sabe, você ainda tem esse preenchimento e o conteúdo não está nivelado. Então é por isso que eu fui em frente e adicionei isso dentro desta coluna. Seis. Então o problema que você começa com imagens de retina Então esta é uma imagem bastante grande aqui , e o que está acontecendo é que ela está se espalhando. Portanto, um bom truque e algo que você pode querer adicionar às suas folhas de estilo é o seu alvo . Todas as imagens fazendo I am J em suas folhas de estilo e apenas fazendo um máximo com de 100%. E o que isso faz é que ele realmente diz os limites que a largura da imagem para caber recipiente não pode exceder a largura de seu recipiente. Então, se formos primeiro a cadeira paga, o iPhone à direita se encaixa bem dentro dos 50% e Patty, então você pode ver que temos se fizermos o elemento inspetor e inspecionarmos esta, uh, é a coluna aqui, é a coluna aqui, você pode ver que temos Veja, ele tem aquele preenchimento de 20 pixels à esquerda e à direita, bem como este. Então, agora vamos em frente e aplicar a primeira abordagem móvel para que você se veja fazendo isso para frente e para trás. E até que você fique muito confiante com a primeira abordagem móvel diz que você pode ver que eu não apliquei a primeira abordagem móvel porque, como você pode ver o caminho ainda obter que feio 50 50 dividir nestas colunas. Seis. Então, se eu tivesse feito esse celular primeiro, eu teria mudado essa propriedade da coluna seis em dois. Minha consulta de mídia, que farei agora. Como fizemos no vídeo anterior, vou cortar a coluna seis e colar na minha carreira na mídia. Então agora, quando me refrescarmos para ainda alinhar isto aqui bem rápido, quando atualizarmos, obtemos isto. Então agora você pode estar perguntando. Bem, agora o que fazemos com isso? Então, se um designer te deu um design que mostra a visão móvel e como você sabe tudo precisa ser definido, se isso foi pensado, que tudo precisa ser definido, se isso foi pensado, e então? Você precisa aplicar isso. Mas, neste caso, não. E se pensarmos sobre a experiência do usuário, você sabe, rolar para sempre, isso não é realmente tão bom. É essa imagem que você conhece, extremamente necessária para transmitir uma certa mensagem? Não, quero dizer , são as mesmas imagens. Este herói é meio redundante. Então, isso é necessário? Eu diria que não. Então, a primeira abordagem móvel neste cenário de caso de uso, seria apenas agir fora. Então, se olharmos para a nossa marca aqui em cima, podemos fazer algumas coisas diferentes para que possamos criar esta classe e apenas dio-classe móvel escondida. E podemos aplicá-lo ao cabelo da imagem ou a toda a coluna seis. Então, apenas para manter isso simples, eu vou apenas criar classe aqui e apenas fazer móvel escondido. Então, se voltarmos para a folha de estilo, precisamos Teoh criar esta classe. Então eu penso em um lugar lógico, adicionado, digamos, vamos adicioná-lo à grade. É referente à estrutura, e é provavelmente algo que usaremos mais tarde. Então, eu só vou Teoh. , Na verdade, isso seria se eu cometi um erro lá, então você queria se inscrever no Mobile. Então móvel escondido e essa exibição de cara? Nenhum. Se atualizarmos, lá vamos nós, está fora da imagem. Então, até chegarmos ao 768, é quando queremos que a imagem apareça. Então precisamos fazer o oposto. Então vamos fazer, hum, aqui está fazer hit móvel e vamos fazer exibir Bloco 3 fresco. E enquanto eu é novamente tudo na consulta de mídia, hum, hum, qualquer coisa maior que 768 esta classe móvel oculta é exibida. Qualquer coisa menor , fica escondida. Então, vemos que em ação aqui abaixo de 768 desaparece, então ainda temos alguns problemas aqui. Não estamos recebendo tapinhas na parte inferior, e estamos recebendo carícias excessivas na parte superior, o que é bom para desktop, mas não encontrar para celular. Então, vamos esperar. Vamos em frente e consertar isso. Então, se voltarmos aqui e vermos que nossa marca, eu nomeei a seção e dei um iPhone de classe. Se vocêachar que essa seção vai se repetir, obviamente eu daria um nome mais semântico, mas neste caso, é a única seção. você Se vocêachar que essa seção vai se repetir, , obviamente eu daria um nome mais semântico, mas neste caso, Se olharmos para o nosso design, ele não tem carícias na parte superior e estofamento extra no Sinto muito, sem estofamento na parte inferior e estofamento extra na parte superior. Então, portanto, eu dei. É a própria classe de iPhone. Então, na minha folha de estilo, esta classe de iPhone tem tapting outono zero, que não é o que queremos para celular. Então precisamos movê-lo para que copiemos e colamos isso na consulta de mídia trabalhando no 7 68 push que ali. Então, os elementos repetitivos que sabíamos que precisávamos da mesma cor para que eu pudesse realmente remover isso. O fundo padrão vai ser zero e 1 20 em qualquer coisa acima 7 68 No entanto, queremos que as propriedades da seção regular para ser aplicado para celular primeiro, então podemos realmente simplesmente matar preenchimento completamente no celular. Primeiro, Se atualizarmos e voltarmos para a nossa visão móvel, você pode ver que, dependendo da parte inferior e superior são consistentes com acariciar no no preenchimento na parte superior e inferior nas outras seções. Então, aí está, a primeira abordagem móvel em ação mais uma vez. Assim, como você pode ver à medida que sua confiança cresce, você estará estilizando ou trabalhando em suas folhas de celular em uma primeira abordagem móvel, significa que todos os estilos estão fora delas. A consulta Unity é feita para o seu dispositivo móvel e todos os estilos dentro de suas consultas de mídia são destinados a qualquer coisa maior 11. Flush Section (de borda para borda): Certo, estamos quase na linha de chegada. Então, se você olhar para os lucros que são feitos aqui, eu criei isso. Esta seção fácil está aqui. É só uma coluna. 12. Então, se você verificar o mercado que eu fiz para a seção Oh, que comentários linha recipiente própria PLO, que é 100% com tag parágrafo dentro. E na verdade, verdade, eu realmente não tive que fazer nenhuma mudança porque ele se encaixa bem dentro do celular primeiro. Então, passando para esta seção Como você pode ver, eu não segui a primeira abordagem móvel apenas para que eu possa passar por algum ponto aqui. Às vezes, é útil criar suas folhas de estilo em uma exibição de área de trabalho para que você saiba com o que está lidando. Então a única coisa é que você tem que voltar e mudar suas consultas de mídia. Então o que eu quero fazer aqui é basicamente querer repassar o quê? O que está acontecendo aqui nestas visualizações, para que você possa dizer que temos que corrigir alguns fundos dimensionando seu para cada bloco, e nós também temos que estilizar isso de forma diferente. Como você pode ver, não parece certo, então vamos ter que dividi-lo. Então olhando para o meu inspetor para inspecionar elemento e olhando para a minha régua aqui, eu acho que o que eu vou ter que fazer aqui é criar, hum, hum, dois diferentes, hum, hum, pontos de ruptura para isso . Ótima. Então, obviamente, eu vou quebrá-lo dois cheio com cabelo abaixo de 768 por 768 que é sobre tablet. Conhece esta vista? Só vou reduzir o tamanho do texto. E uma vez que eu quebro isso, provavelmente em cerca de, hum, em algum lugar por volta das 10 são 10. 24. Eu aumentaria para o tamanho completo. Então, é o que vou fazer. Primeiro, vamos descer até Mobile primeiro aqui e voltar ao meu estilo. Deixe-me expandir isso um pouco se eu voltar para a minha marcação. Como você pode ver, eu dei a cada eu dei a cada bloco uma classe de categoria e seu fundo correspondente ao italiano indiano francês corresponde à categoria de fundo é específica para, hum, bloco uma classe de categoria e seu fundo correspondente ao italiano indiano francês corresponde à categoria de fundo é específica para, hum, este chicote de 20%. Não, alguns. É algo muito interessante aqui. Então nenhuma dessas colunas é 20% o mais próximo que posso chegar. É calmo para, mas é um 16% chamado três em 25%. Então você sabe, se eu tenho 100% e eu quero dividi-lo igualmente em cinco, isso é 20%. por isso que tive de criar a minha própria Foipor isso que tive de criar a minha própriaaula especial A para este quarteirão. E eu nomeei a categoria flutuando para a esquerda com uma caixa de ordem de tamanho de 20 caixas. Então o que eu preciso fazer é eu realmente preciso mover isso para a área de trabalho. Então eu pego categoria, corto fora do meu celular primeiro, hum, seção. Então eu tenho que colocá-lo nesta consulta de mídia de 768 Então eu vou colocá-lo, na verdade, logo após este aqui. Eu acho que sim. E se eu atualizar bem a página, então eu ainda tenho algumas coisas para consertar aqui, hum, hum, basicamente quebrei esta grade para fora e colocá-lo na área de trabalho. Então, quando eu exceder 760 a, ele vai encaixar no lugar. Então temos um. Estamos quase lá. Então nós só temos que trabalhar com os estilos atuais para, uh, o celular primeiro. Então vamos rolar até aqui e você pode ver que minhas categorias tem, ah, altura definida. E todas essas imagensde de fundo precisam entrar na minha consulta de mídia. Então eu tenho uma consulta de 768 minutos aqui em cima apenas indo para passeá-lo bem sob isso, indo para inventar corretamente e muito fresco. Eu tiro minhas imagens de fundo do Mobile First, que é exatamente o que eu queria fazer. Então agora, continuando na categoria a seção de categoria que eu criei mais uma vez tem uma altura fixa que eu quero reduzir, hum, eles cor de fundo, eu vou mudar isso. E então também essa seção chamamos de receitas, que é essa classe aqui, matting zero, matting zero, acariciando em cima, baixo e esquerdo, o que podemos mudar. Então vamos continuar e continuar mudando isso. E vamos mudar a altura. Vamos remover as margens aqui. Então vamos em frente e fazer isso. É a primeira coisa que quero fazer é cortar esta categoria. Então, na verdade, vamos copiar isso agora mesmo. Coloque-o na minha consulta de mídia para aquele Stop. Então lembre-se, isso é exatamente como queríamos e desktops. Vou deixar isto aqui agora. Móvel primeiro. Não quero esta cor, está bem? E já que não temos antecedentes, tem que se preocupar com isso para que eu possa removê-lo? Quero que a minha mensagem esteja no centro. Não quero que seja tão alto, então vou tirar isso. E neste ponto, devemos apenas obter todos os brancos de atualização. Meu texto é branco, então vamos mudar o cabelo cor do texto. Só vou mudar para cinza só para vermos o que estamos fazendo. Então você pode ver que começando a parecer muito melhor lá, você sabe, é definitivamente conteúdo. Primeiro, removemos a altura, por isso está apenas a sair das margens. removemos a altura, Então, se inspecionarmos a venda, May iria ajustá-la à medida que avançamos. Então aqui estamos recebendo Ah, margem, topo na tag de parágrafo de categoria, que é isso aqui de 70 pixels, e você sabe que isso não parece muito ruim. Então podemos manter isso assim. Acho que o único problema que você pode encontrar é se nós formos adicionar uma regra que eu estava planejando adicionar uma regra. Quer dizer, isso é com você. Isso é algo que você e o designer falariam ou se você fosse o designer, algo que você teria que lidar como você cria, hum, como você desenvolveu para membro para Mobile primeiro. Então, uma coisa que eu sugiro altamente é sim, adicionando incorporando uma borda na parte inferior destes. E talvez, você sabe, obviamente excluindo essa fronteira aqui. Então isso é algo que você pode dilatar. Quero dizer, neste momento, parece muito bom. E se sairmos para 768 teremos aquela maravilhosa magia com a consulta de mídia. E se sairmos para 768 teremos aquela maravilhosa magia com a consulta de mídia. Então, mais uma vez, é apenas uma questão de mover tudo para fora da folha de estilo principal, mover tudo para a mídia, consultá-lo para uma área de trabalho. Então, obviamente, o que quer que você tenha aqui, você não quer substituí-lo ou se repetir dentro da consulta de mídia. Assim como na categoria aqui, a cor da categoria mudou porque na área de trabalho, ela é branca com o fundo roxo, o fundo específico, hum, correspondente lá. Então vamos para a próxima parte, que é essa visão estendida lá, que é apenas uma questão de brincar com a imagem de Akron para que possamos fazer algumas coisas aqui. Então, se verificarmos o, hum, os estilos aqui para a categoria, podemos realmente incluir o tamanho do fundo. Então, se fizermos o tamanho do fundo e configurá-lo para cobrir, você pode ver que ele vende por isso. E tudo o que está fazendo é expandir essa imagem de fundo para preencher esse espaço. Então é isso que vamos dio voltar para o nosso arquivo talvez não CSS aqui e dentro da categoria que vamos adicionar para esta consulta de mídia 7 68 e acima. Cobertura de fundo. Então, se nós estamos frescos e expandi-lo, você parece que nós resolvemos para isso. Então lá vamos nós. É uma caixa fluida com uma grade personalizada. Esta não é a sua grade de coluna em que trabalhamos de 1 a 12. Este é um costume gregos. Precisávamos de 20% no caminho. Nós obtemos 20% obviamente, 100 dividido por cinco é 20 então é por isso que é 20%. E isso não estava disponível da nossa rede. Então é uma classe de categoria que nós criamos, hum, e dar-lhe um 20% com. Assim que chegarmos a uma primeira visão móvel, entramos nesse estilo de lista. E, obviamente, se estes foram comprimentos em que eu posso mudar minha marcação, eles vão para a página correspondente. Então lá vai você. Mais uma vez, é móvel primeiro, e então você não adiciona, hum, hum, qualquer outra coisa até você chegar a qualquer coisa acima deste 768 Então, para terminar esta seção, vá em frente e como um desafio, descobrir como incluir isso. Isto entre o ponto de ruptura, que é, um, 760 entre 7cc A. Cada inspetor elementos algures entre 768 e 20º e 1024. Então vá em frente, e isso E quando voltarmos, faremos a seção final 12. Rodapé: Certo, então chegamos à linha de chegada. Então vamos dar uma olhada. Em primeiro lugar, a partir do vídeo anterior, qual foi a correção para isso entre pontos de quebra. Então, indo do ponto de ruptura móvel, que termina em 768 que é isso para você bem aqui. Tivemos que alterar o tamanho da fonte nessa categoria, então reduzimos para baixo. Como você pode ver aqui, dentro do meu 7 68 media query, eu reduzi para 20 pixels. Então, uma vez que tivéssemos espaço suficiente, podemos aumentá-lo para o original, que está bem ali, que era na verdade uma nova mídia que queria tinha que criar a 1200 pixels, aumentou para 30 pixels no parágrafo. Então essa foi a solução para isso. Então, como você pode ver, nosso foi em frente e criou a última seção este as estatísticas no rodapé. Então, se formos até a minha marca, você pode ver aqui nada fora do comum. Então eu tenho uma seção dar-lhe uma classe de estatísticas para que eu pudesse brincar com este preenchimento aqui. Não vai ser o mesmo preenchimento que as outras seções e dentro desta seção. Tenho o meu contentor, a minha linha. E então novamente eu tive que criar uma grade personalizada e eu dei a ela uma classe de stat. Então, se eu ir para o meu principal que TSS você pode ver aqui na verdade apenas listado junto com categoria, uma vez que ele usou o mesmo ver, ele diz propriedades com 20% flutuante para a esquerda. E tudo isso está acontecendo em qualquer coisa maior do que um dispositivo móvel. Então, quando vamos para o dispositivo móvel para você, você pode ver que eu tenho em formato de lista. Então, se você olhar o estilo também é diferente. Dê a ele um fundo roxo com texto branco. Então, se formos para minha consulta de mídia aqui em cima, quando meus estilos estão em, você pode ver que meu celular primeiro meu barco vai primeiro estilo. Eu aplico esse fundo roxo e a cor do texto é branca. Então, na minha consulta de mídia aqui, meu 7 68 você pode ver que eu trocá-lo ao redor. Eu mudei o funcionário para preto, então deixe-me puxá-lo lá fora e fica a cor para preto. Ela é a cor de fundo de volta para branco e, em seguida, para a última seção. É muito simples Rodapé Ter um recipiente com uma linha Tem uma classe de esquerda e uma classe de direita desde que era apenas um elemento flutuante simples. Por isso, se verificarmos o meu CSS aqui na parte inferior da grelha, lamento. Na parte inferior do meu ponto principal CSS, eu realmente adicionei esquerda e direita para a minha visão porque eu preciso do flutuador esquerda e direita. Mas eu não incluí isso para o celular você já que ele está apenas sendo centrado. Então você pode ver se eu rolar de volta aqui, hum, para o meu rodapé Silêncio meus estilos móveis Primeiro rodapé são apenas centro de alinhamento de texto. Então, aí está. Vou postar tanto a marcação nas folhas de estilo para que você possa ter acesso a eles e rever o, mas por favor certifique-se de tirar algumas capturas de tela. Quero ver o progresso do seu trabalho. E se você tiver alguma dúvida, certifique-se de publicá-las na pergunta para que eu possa respondê-las. E isso conclui Web design responsivo Mobile primeira abordagem com imagens ameaçadoras e consultas de mídia