Aula 7 - Desenvolvimento WEB
Presentation
•
Information Technology (IT)
•
11th Grade
•
Practice Problem
•
Medium
Lucas Sbaraini
Used 1+ times
FREE Resource
7 Slides • 4 Questions
1
Desenvolvimento WEB
Aula 7 - Unidades de Medidas Relativas em HTML e CSS
Professor: Lucas Sbaraini
2
Medidas Relativas em CSS
Você sabia que o tamanho de um elemento na tela pode se adaptar automaticamente à tela do usuário?
Hoje vamos aprender sobre medidas relativas e como usá-las para criar layouts responsivos!
3
O que são medidas absolutas?
A unidade px (pixel) é fixa. Ela não muda com o tamanho da tela ou preferências do usuário.
Quando usar?
Ícones
Bordas finas
Elementos com tamanho fixo
4
Porcentagem (%)
A porcentagem é relativa ao elemento pai.
Exemplo:
Esse div vai ocupar 80% da largura do pai.
5
Multiple Choice
O que faz a unidade relativa porcentagem % em CSS?
6
Unidades em e rem
em: relativo ao tamanho da fonte do elemento pai
rem: relativo ao tamanho da fonte do elemento <html>
Dica: Use rem para manter a consistência no layout.
7
Multiple Choice
A unidade rem é relativa ao tamanho da fonte do elemento pai.
Verdadeiro
Falso
8
Viewport: vw e vh
Unidades da tela: vw e vh
Ótimo para banners, seções em tela cheia e layouts responsivos!
Aplicações:
1vw = 1% da largura da tela
1vh = 1% da altura da tela
9
Multiple Choice
Qual unidade é ideal para um banner que ocupa toda a largura da tela?
em
rem
vw
vh
10
Multiple Choice
Você foi contratado para criar uma seção chamada "hero" que deve sempre ocupar toda a altura da tela do usuário. Qual unidade você usaria?
vw
vh
px
%
11
Desafio Prático
Crie um layout com dois blocos. Cada bloco deve ser criado no html usando <div class="bloco1"> e no css deve ter um width usando unidade relativa, height:150px e background-color de sua preferência.
O primeiro bloco deve ocupar 30% da largura.
O segundo bloco deve ocupar 70%. da largura.
Use apenas medidas relativas no CSS.
Extra: Use margin ou padding para deixar os elementos mais separados.
Desenvolvimento WEB
Aula 7 - Unidades de Medidas Relativas em HTML e CSS
Professor: Lucas Sbaraini
Show answer
Auto Play
Slide 1 / 11
SLIDE
Similar Resources on Wayground
7 questions
Củng cố
Presentation
•
KG
8 questions
1/8 Observing the Universe with Different Wavelengths
Presentation
•
11th Grade
9 questions
Naruto - O Ninja da Programação
Presentation
•
11th Grade
8 questions
MZSV
Presentation
•
11th Grade
10 questions
TOÀN CẦU HÓA VÀ CÁC VẤN ĐỀ THẾ GIỚI
Presentation
•
10th Grade
12 questions
DESAFIO_PROVAPR_2_EM_QUIM_001
Presentation
•
11th Grade
9 questions
Semana 21 [ADM]C3U2S21A3 Matemática 3 BIMESTRE
Presentation
•
11th Grade
9 questions
Filosofía LCG 11
Presentation
•
11th Grade
Popular Resources on Wayground
6 questions
PRIDE Always and Everywhere
Presentation
•
12th Grade
20 questions
Lab Safety Quiz
Quiz
•
6th Grade
26 questions
KOR Review Kahoot Questions
Quiz
•
8th Grade
21 questions
Continents and Oceans
Quiz
•
6th Grade
12 questions
Unit Zero lesson 2 cafeteria
Presentation
•
9th - 12th Grade
20 questions
Parts of Speech
Quiz
•
5th Grade
10 questions
Riddles Riddles fun Riddles
Quiz
•
6th - 12th Grade
16 questions
Subject & Predicate
Quiz
•
5th Grade
Discover more resources for Information Technology (IT)
12 questions
Unit Zero lesson 2 cafeteria
Presentation
•
9th - 12th Grade
10 questions
Riddles Riddles fun Riddles
Quiz
•
6th - 12th Grade
10 questions
Would you Rather?
Quiz
•
9th - 12th Grade
10 questions
Soup, Salad, or Sandwich?
Quiz
•
1st Grade - Professio...
10 questions
Labor Day and Its Historical Significance
Interactive video
•
7th - 12th Grade
20 questions
Scientific Method & Variables
Quiz
•
9th - 12th Grade
7 questions
EAHS PBIS Lesson- Bathroom
Presentation
•
9th - 12th Grade
20 questions
Spanish alphabet
Quiz
•
9th - 12th Grade