https://github.com/rocketseat-content/youtube-masterclass-responsividade

https://github.com/rocketseat-content/youtube-masterclass-responsividade

Last synced: 4 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/rocketseat-content/youtube-masterclass-responsividade
• Owner: rocketseat-content
• Created: 2020-03-17T23:46:12.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-09-21T03:32:27.000Z (over 2 years ago)
• Last Synced: 2024-07-31T19:23:23.662Z (6 months ago)
• Language: CSS
• Size: 27.3 KB
• Stars: 355
• Watchers: 17
• Forks: 174
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Responsividade 

Fala Dev! 💜

Responsividade é um assunto muito importante para que nosso layout seja flexível, conforme o dispositivo que o está acessando, seja ele smartphone, tablet ou desktop. (E até mesmo, a impressora sabia?)

Na Masterclass de hoje, vamos usar estratégias de CSS Units para que tanto o nosso Layout, quanto os nossos textos, fiquem fluidos. 

Utilizaremos também CSS Media Queries para adicionar CSS customizados conforme o breakpoint definido, para que nosso layout fique adaptado ao viewport do dispositivo. 

Além do mais, veremos atributos e tags HTML especiais, para que possamos obter sucesso ao tornar nosso layout responsivo.

Se você ainda não sabe muito bem como fazer layouts responsivos, está começando nesse assunto, está um pouco inseguro, fique tranquilo, vem comigo que eu vou tirar suas dúvidas!

Espero que faça sentido pra você. 🥰

Bora codar? 🚀 

## CSS Units

Unidades de medidas do CSS

Layout Fixo

`px` - Pixels

Layout Fluido

`%` - Porcentagem

`auto` - Automática

`vh` - Viewport Height

`vw` - Viewport Width

Textos fixos

`1px` = 0.75pt

`16px` = 12pt

Texto fluidos

`em` - multiplicado pelo pai 

`rem` - multiplicado pelo root

## CSS Media Queries 

No HTMl eu coloco a seguinte tag meta

```html

```

No CSS eu uso da seguinte forma

```css

@media (max-width: 320px) {

  #form h3 {

    font-size: 2rem;

  }

}

```

## HTML Media Attrib.

Posso utilizar o atribuito `media` no link do meu HTML, ao importar um arquivo css, usando as propriedades da mesma forma que usaria na regra `@media` do css.

```html

```

## Imagens

Usamos a tag `` para que as imagens sejam responsivas.

```html

    

    

    

    

```

Sempre que possível, usar SVG ao invés de JPG, PNG