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
9 questions
Operação com Conjuntos
Presentation
•
12th Grade
8 questions
Tiro vertical: Altura y tiempo
Presentation
•
11th Grade
8 questions
PRETURNO DE CALIDAD 29 DE SEPTIEMBRE
Presentation
•
KG
8 questions
O problema da demarcação da ciência
Presentation
•
11th Grade
7 questions
QUIZZ Probabilidade
Presentation
•
11th Grade
8 questions
INTERNET
Presentation
•
KG
7 questions
Atividade Lei e Projeto de Lei
Presentation
•
11th Grade
9 questions
Química - Cinética
Presentation
•
11th Grade
Popular Resources on Wayground
10 questions
Main Idea and Supporting Details
Quiz
•
3rd - 6th Grade
20 questions
Math Review
Quiz
•
3rd Grade
14 questions
25-26 SY 8th Grade EOY Benchmark
Quiz
•
8th Grade
15 questions
Fast food
Quiz
•
7th Grade
20 questions
Math Review
Quiz
•
6th Grade
20 questions
Context Clues
Quiz
•
6th Grade
21 questions
EOY Grade 6 Benchmark Assessment - Content Skills
Quiz
•
6th Grade
20 questions
Inferences
Quiz
•
4th Grade
Discover more resources for Information Technology (IT)
8 questions
Writing Equations from Verbal Descriptions
Quiz
•
9th - 12th Grade
50 questions
US History Regents Practice Exam
Quiz
•
11th Grade
30 questions
US History Regents Review #3
Quiz
•
11th Grade
25 questions
US History Regents Review # 1
Quiz
•
11th Grade
14 questions
Attributes of Linear Functions
Quiz
•
9th - 12th Grade
20 questions
Types of Credit
Quiz
•
9th - 12th Grade
90 questions
2nd Semester World History Final Exam (1750-Present) (5/11/26)
Quiz
•
11th Grade
59 questions
Bio Final Exam Sem 2 with marathon runner
Quiz
•
9th - 12th Grade