• Stars
    star
    353
  • Rank 120,322 (Top 3 %)
  • Language
    CSS
  • Created over 4 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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

No CSS eu uso da seguinte forma

@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.

<link 
    rel="stylesheet"
    href="responsive.css" 
    media="screen and (max-width: 768px)"
/>

<link rel="stylesheet" href="print.css" media="print">

Imagens

Usamos a tag <picture> para que as imagens sejam responsivas.

<picture class="image" alt="Imagem">
    <source media="(min-width: 768px)" 
        srcset="https://i.ytimg.com/vi/GykTLqODQuU/maxresdefault.jpg">
    <source media="(min-width: 320px)" 
        srcset="https://i.ytimg.com/vi/GykTLqODQuU/hqdefault.jpg">
    <source media="(min-width: 10px)" 
        srcset="https://i.ytimg.com/vi/GykTLqODQuU/mqdefault.jpg">

    <img 
        src="https://i.ytimg.com/vi/GykTLqODQuU/hqdefault.jpg" 
        alt="Imagem" />
</picture>

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

More Repositories

1

node-typescript-structure

Node.js, ESLint, TypeScript, Jest & Babel
JavaScript
367
star
2

youtube-api-node-solid

Código produzido no vídeo "Princípios SOLID em uma API REST com Node.js e TypeScript"
TypeScript
315
star
3

react-nextjs-typescript-structure

Código produzido no vídeo "Como inicio meus apps com ReactJS? Next.js, TypeScript, ESLint e Styled Components"
TypeScript
307
star
4

youtube-api-rest-restful

JavaScript
254
star
5

youtube-desvendando-css-grid

Project created for the video about CSS Grid
HTML
213
star
6

forms-react

forms-react
TypeScript
195
star
7

youtube-react-native-nubank

Código do vídeo replicando a interface do Nubank com React Native
JavaScript
168
star
8

masterclass-nodejs-sql

Código produzido durante o vídeo "Masterclass #01 - SQL no Node.js com Sequelize" no Youtube 🔥
JavaScript
163
star
9

youtube-next-auth-jwt

TypeScript
159
star
10

youtube-git-guia-pratico-iniciante

HTML
135
star
11

youtube-code-drop-theme-switcher

Código produzido no vídeo "Code/Drops #16 - Tema light/dark com React, Styled Components e TypeScript" 🚀🔥
TypeScript
127
star
12

masterclass-nodejs-background-jobs

Código produzido durante o vídeo "Masterclass #02 - Background jobs (filas) no Node.js com Bull" no Youtube 🔥
JavaScript
125
star
13

youtube-nodejs-tdd-jest

Código produzido durante o vídeo sobre TDD com NodeJS utilizando Jest
HTML
124
star
14

youtube-react-native-uber

Código produzido durante o vídeo sobre criação da Interface do Uber com React Native
JavaScript
119
star
15

youtube-ui-clone-pipefy

Código produzido durante o vídeo "Recriando Pipefy do zero (com drag n' drop)"
JavaScript
116
star
16

youtube-challenge-node-kafka

Micro-services with Node.js and Apache Kafka
JavaScript
111
star
17

masterclass-typescript

Código produzido durante o vídeo "TypeScript, o início, de forma prática - Masterclass #07" no Youtube 🔥
TypeScript
110
star
18

youtube-monorepo

Monorepo structure with Node.js, ReactJS, React Native, Expo, Yarn Workspaces, TypeScript, ESLint, Jest and CI/CD
Java
108
star
19

youtube-upload-nodejs-reactjs-backend

Código produzido durante o vídeo sobre criação do backend de uma aplicação de upload de imagens com NodeJS e ReactJS.
JavaScript
108
star
20

youtube-challenge-electron-tray

Provides an easy way to open favorite projects on VSCode
JavaScript
100
star
21

youtube-clone-discord

Discord UI clone for study purposes.
TypeScript
97
star
22

youtube-form-animate-css-js-puro

CSS
93
star
23

youtube-typescript-nodejs

Código do projeto produzido durante o vídeo sobre TypeScript no NodeJS
TypeScript
88
star
24

youtube-style-guide-javascript

Código produzido no vídeo sobre Style Guides com Javascript usando ESLint, Prettier e EditorConfig
JavaScript
86
star
25

youtube-nextjs-design-system

Código produzido para o vídeo "Aplicações React do futuro? UI declarativas, design system e frameworks"
TypeScript
82
star
26

youtube-challenge-nestjs-graphql

GraphQL API with NestJS in Back-end. React in Front-end.
TypeScript
78
star
27

youtube-typescript-reactjs

Código produzido durante o vídeo sobre TypeScript no ReactJS
TypeScript
76
star
28

youtube-ui-clone-instagram-feed

Código produzido durante o vídeo "Recriando feed do instagram COMPLETO com React Native"
JavaScript
71
star
29

youtube-react-native-realmdb

Código produzido durante o vídeo "React Native + RealmDB: APP do zero + API do Github (🗄️ Offline Storage)"
JavaScript
69
star
30

next-trpc-typescript-zod

typescript-fullstack
TypeScript
66
star
31

youtube-upload-nodejs-reactjs-frontend

Código produzido durante o vídeo sobre criação do front-end de uma aplicação de upload de imagens com NodeJS e ReactJS.
JavaScript
66
star
32

youtube-react-swr

Código produzido durante o vídeo sobre SWR no React
TypeScript
62
star
33

serie-api-rest-node

Código da série de API REST com NodeJS no Youtube
JavaScript
62
star
34

youtube-node-testes

TypeScript
61
star
35

youtube-react-context-selector

TypeScript
58
star
36

node-tests-e2e

TypeScript
58
star
37

youtube-challenge-ui-kit

TypeScript
57
star
38

youtube-nextjs-ssg

Código da aplicação produzida no vídeo "Essa feature fez o Next.js ser o framework mais popular | Code/Drops #59"
TypeScript
56
star
39

blog-adonis-reactjs-react-native-airbnb

API developed in the series of post about recreating the Airbnb interface with AdonisJS, ReactJS e React Native
JavaScript
55
star
40

youtube-html-js-audio-player

An audio player created with HTML Audio and Javascript 🚀
JavaScript
53
star
41

youtube-clone-twitter

Responsive Twitter UI clone for study purposes.
TypeScript
53
star
42

youtube_node_acl

TypeScript
53
star
43

youtube-reduxsauce

Code developed in the youtube video about Redux Sauce
JavaScript
52
star
44

rsxp-mobile

Parte mobile do aplicativo do RS/XP
JavaScript
49
star
45

blog-adonis-reactjs-react-native-airbnb-web

ReactJS app developed in the series about recreating the Airbnb interface
JavaScript
49
star
46

blog-adonis-reactjs-react-native-airbnb-app

React Native app developed in the series about recreating the Airbnb interface
JavaScript
47
star
47

youtube-clone-linkedin

LinkedIn Feed UI Clone.
TypeScript
45
star
48

youtube-serverless-typescript

JavaScript
45
star
49

youtube-clone-twitch-app

TypeScript
43
star
50

youtube-masterclass-knexjs

JavaScript
41
star
51

youtube-crawler-codedrops

JavaScript
40
star
52

youtube-masterclass-nodejs

JavaScript
40
star
53

youtube-serverless-node-aws-lambda

Código produzido durante o vídeo sobre serverless utilizando AWS Lambda e NodeJS
JavaScript
40
star
54

youtube-codequinta-layout-react-native

Project developed during the CodeQuinta #6
JavaScript
40
star
55

youtube-vercel-nextjs-serverless

Código produzido no vídeo "Serverless com ReactJS e Next.js na Vercel"
TypeScript
39
star
56

youtube-clone-tesla-homepage

Tesla Homepage UI Clone
TypeScript
39
star
57

prisma_decode

TypeScript
37
star
58

blog-auth-rn-node-backend

Project created in the blog post about JWT auth in React Native using Node.js API
JavaScript
36
star
59

youtube-codequinta-redux-saga

Project created during Redux Saga live
JavaScript
35
star
60

youtube-masterclass-drag-and-drop-raiz

https://youtu.be/6wn8hpUcEcM
JavaScript
35
star
61

contrib-vuejs-3.0-vite

Projeto desenvolvido no Contrib de Vue 3
JavaScript
34
star
62

youtube-react-router-auth

Project created for the video about auth control in routes in ReactJS
HTML
34
star
63

youtube-clone-stripe-menu

Stripe Menu clone for study purposes.
JavaScript
33
star
64

youtube-challenge-next-stripe

Mini e-commerce example created with Next.js and Stripe API.
TypeScript
32
star
65

youtube-serverless-thumb-generator

Código produzido no vídeo "Thumbnail as a service usando serverless com Next.js"
TypeScript
31
star
66

youtube-challenge-grpc

Micro-services communicating with gRPC.
JavaScript
30
star
67

react-storybook

TypeScript
29
star
68

youtube-masterclass-dom

🎹 Create a virtual piano with html, css and vanilla javascript. https://www.youtube.com/watch?v=UftSB4DaRU4
HTML
29
star
69

blog-react-material-ui

Project created in the post about Material UI in ReactJS
JavaScript
28
star
70

youtube-clone-mercadolivre

Mercado Livre (Sale Page) UI Clone
TypeScript
26
star
71

blog-nextjs-mongodb-vercel

☕ Em 10 passos vamos criar um Blog com NextJS. O blog vai ter um contador de visitas que fica salvo no Mongo Atlas e consultaremos a API com Fetch API usando o hook SWR. 🚀
TypeScript
26
star
72

youtube-cli-node-gluegun

Código produzido durante o vídeo "Criando uma CLI com NodeJS e Gluegun"
JavaScript
24
star
73

youtube-codequinta-redux

Example created during RocketLive #1
JavaScript
24
star
74

youtube-codedrops-adminbro

JavaScript
24
star
75

youtube-codequinta-api-rest-react-native

Code developed during the CodeQuinta #9
Objective-C
23
star
76

youtube-react-hooks

Código produzido durante o vídeo sobre React Hooks
HTML
23
star
77

youtube-clone-pinterest

Pinterest homepage UI Clone
HTML
23
star
78

contrib-flutter

Código produzido na live "Interfaces Expressivas com Flutter ft. Jacob Moura | Contrib #01"
Dart
23
star
79

blog-express-sequelize

Project created in the post about Sequelize in NodeJS with ExpressJS
JavaScript
22
star
80

youtube_node_redis

TypeScript
21
star
81

youtube-codedrops-menu-tree

▶️ https://youtu.be/-VQPimwkstM
JavaScript
21
star
82

youtube-clone-github

Responsive GitHub UI clone for study purposes.
TypeScript
21
star
83

react-native-offline-first-redux-saga-queue

Código do vídeo de Fila de ações offline com Redux Saga no React Native
JavaScript
21
star
84

contrib-node-k8s

JavaScript
21
star
85

blog-scroll-infinito-react-native

Project created for the "Scroll Infinito no React Native" post
Objective-C
20
star
86

blog-upload-reactjs-frontend

Código produzido para o post sobre criação do front-end de uma aplicação de upload de imagens com NodeJS e ReactJS.
TypeScript
20
star
87

youtube-image-crop

Final code for CodeDrops#56
JavaScript
20
star
88

youtube-clone-vercel-homepage

Vercel Homepage UI Clone for studying purposes
SCSS
20
star
89

youtube_graphql_express

TypeScript
19
star
90

youtube-desvendando-variavel-this

JavaScript
18
star
91

youtube-motion-typeform-homepage

Motion Clone from Typeform Homepage
TypeScript
18
star
92

youtube-clone-google-homepage

Google Homepage UI Clone.
CSS
17
star
93

youtube-clone-dropbox-menu

Responsive Dropbox Home UI clone for study purposes.
TypeScript
17
star
94

youtube-redux-persist

To do App developed in the Redux Persist video
JavaScript
16
star
95

youtube-adonisjs-iniciando

Project created in the AdonisJS video
JavaScript
16
star
96

youtube-array-high-order-functions

Código da aula sobre Array High Order Functions
JavaScript
15
star
97

youtube-live-geolocation-e-mapas-backend

JavaScript
14
star
98

youtube-challenge-arkit

Augmented Reality (AR) with React Native for ARKit (iOS)
JavaScript
13
star
99

youtube-live-geolocation-e-mapas

Objective-C
13
star
100

youtube-challenge-deno

REST API with Deno, brother of Node.js.
JavaScript
12
star