Тёмный

UNIDADES CSS RELATIVAS: %, REM, EM, CH, EX (CSS3) 

Ferreira Studios
Подписаться 68 тыс.
Просмотров 21 тыс.
50% 1

O maior desafio de muitos web-developers é conseguir desenvolver um css organizado, robusto e utilizando as propriedades corretas de medidas.
O CSS tem várias unidades diferentes para expressar unidades de comprimento (largura x altura), entretanto, muitas propriedades não são utilizadas e abstraídas corretamente, algumas propriedades muitos desenvolvedores nem conhecem, e outras são simplesmente deixadas de lado, mesmo vivendo em uma época onde pensar em mobile-first, aplicações hibridas, layout responsivo e css robusto se tornou “obrigação”.
Nesta série de duas aulas, aprenderemos a trabalhar com medidas flexíveis para enriquecer nossos códigos front-end, e principalmente entender a diferença entre medidas absolutas e medidas relativas.
Entre as css units que iremos aprender, temos: porcentagem (%), em, rem, ch, ex, vh, vw, vmax,vmin e etc.
// LINKS IMPORTANTES:
1. W3Schools css3 units - www.w3schools.com/cssref/css_units.asp
2. Mozilla developers - developer.mozilla.org/en-US/docs/Web/CSS/length
3. Uma análise profunda sobre a utilização de "em" como media-queries flexíveis - zellwk.com/blog...
4. Breakpoints baseados em Angular Material - www.dropbox.co...
// INSCREVA-SE NO CANAL
adf.ly/1XvuRS
// REDES SOCIAIS
1. Twitter: adf.ly/1XvuFL
2. Facebook: adf.ly/1XvuIl
3. Google+: adf.ly/1XvuLW

Опубликовано:

 

1 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 26   
@rylikezfive3868
@rylikezfive3868 7 лет назад
O cara se mata estudando desenvolvimento Web para quando assistir um vídeo sobre dev, aparcer um comercial da Wix dizendo crie um site em questão de segundos. Tenso isso.
@RamonDBS
@RamonDBS 6 лет назад
Nós não criamos mais websites, criamos aplicações web :)
@GutembergMedeirosCCB
@GutembergMedeirosCCB 4 года назад
Relaxa, um site como a wix jamais irá criar uma aplicação web.
@andressaparanhos5255
@andressaparanhos5255 2 года назад
kkkkk mano siim
@ramonvinicius3498
@ramonvinicius3498 2 года назад
A pergunta é: quem que usa Wix?
@PablogarciaCriativo
@PablogarciaCriativo 2 года назад
O vídeo esta excelente, me ajudou muito a entender cada uma das medidas. Cada Unidade: 2:11 - (%)Porcentagem 5:55 - em e rem 13:37 - ex e ch
@samuxui
@samuxui 6 лет назад
Poderia também fazer um vídeo explicando sobre posicionamentos do css. e explicando o uso correto de static, relative, absolute, fixed. Um abraço!
@eltonmiranda5817
@eltonmiranda5817 6 лет назад
6:00
@rodrigosousa4102
@rodrigosousa4102 3 года назад
Picas?
@thiagoleite2776
@thiagoleite2776 7 лет назад
Pô realmente esses anúncios do wix são foda de chato rs mas enfim.... você comentou sobre boilerplate css... poderia dar alguma dica? venho do back end e estou me interessando bastante por front, mas quero ir além do bootstrap por isso estou estudando o ccs do jeito certo... parabéns pelo canal!! abs
@romulocesarsi
@romulocesarsi 8 лет назад
Aeeee, ótimo vídeo... Cara, continue assim, estou sempre a espera de seus vídeos, parabéns!
@jhonatassantos7941
@jhonatassantos7941 Год назад
Ficou muito confuso a explicação do em e rem.
@augustotpaiva_
@augustotpaiva_ 4 года назад
Quase desisti de assistir o vídeo, anúncios demaaaaaaais. Isso atrapalha ao assimilar o conhecimento porque te interrompe toda hora a linha de raciocínio. De toda forma, obrigado pelo compartilhamento de conhecimento.
@jonatancom8
@jonatancom8 3 года назад
Instale o adblock
@samueloliveira9427
@samueloliveira9427 7 лет назад
Obrigado cara! comecei a pouco tempo e isso me ajudou muito referente a medida EM, então eu posso dar um font-size no body e controlar todo meu layout ? facilitaria muito nos breakpoints, pois a cada tamanho de tela eu mudaria o valor do font-size é isso ?
@juniorvaz9092
@juniorvaz9092 7 лет назад
Rapaz...tenso...Sei que quem controla isso é o RU-vid mas é impressão ou os vídeos do Ferreira Studios é o que mais tem propaganda por tempo de exibição!!! Deveria ter uma opção para nós meros usuários avaliar uma propaganda e o RU-vid tomar uma providência para tirar do ar ou minimizar o tempo de exibição entre uma e outra!!
@gamecast4432
@gamecast4432 8 лет назад
isso é bom então pra criar um site responsivo
@samuxui
@samuxui 6 лет назад
Ferreira Studios vocês teriam um pdf explicando tudo isso que está no vídeo? Ficarei grato.
@carlosrobertopaviotti9418
@carlosrobertopaviotti9418 3 года назад
Amigo, a aula é boa mas à um excesso de propaganda, desisti!
@samuxui
@samuxui 4 года назад
Fiquei confuso na parte REM
@gabrielcosta6917
@gabrielcosta6917 5 лет назад
Sensacional amigo. Só o excesso de anúncios no vídeo que me deixou incomodado. Recomendo diminuir. Obrigado
@JP8431
@JP8431 8 лет назад
muito bom muito bom mesmo
@SrMartins
@SrMartins 8 лет назад
Apesar do conteúdo legal devo lhe dar uma bronca por usar float... Todos os devs que conheço realmente acham q float serve para fazer alinhamento =(
@leonardoferreira.design
@leonardoferreira.design 8 лет назад
Olá, Thiago. Primeiramente obrigado pelo seus elogios e pela disposição em comentar, mas com relação a questão do float, vou ter que discordar um pouco, a W3C não emite nenhuma restrição para utilização da propriedade, e ela se torna importante em alguns casos, principalmente quando você não estiver utilizando propriedades flex-box, ou grids baseados em porcentagem. O próprio Bootstrap e o Angular Material utilizam a propriedade, a questão é que deve-se utilizar o float juntamente com a propriedade clear e quem sabe até criar um "clearfix" para orientar os elementos, no caso do vídeo não se fez necessário, mas você pode dar uma olhada mais sobre a documentação da propriedade em: developer.mozilla.org/pt-BR/docs/Web/CSS/float. Segundo a W3C: "A propriedade float especifica se uma caixa deve flutuar à esquerda , à direita ou não em todos.", você pode conferir mais em: www.w3.org/wiki/CSS/Properties/float, a própria comunidade da mozilla e da w3c descreve que se você utilizar float não tem necessidade de usar propriedades display por exemplo, pq o próprio float já possui um estado display:block (por padrão). De uma maneira geral, opte por propriedades em %, flex-box e afins, existem também propriedades de multiple columns do css, saiba mais em: www.w3schools.com/css/css3_multiple_columns.asp, drafts.csswg.org/css-page-floats-3 Enfim, me desculpe pelo grande texto amigo, é um prazer compartilhar e aprendermos juntos! Obrigado pelo comentário. Grande abraço e sucesso! :)
@SrMartins
@SrMartins 8 лет назад
Kkk, sem problemas... apesar da w3c não impor restricão de uso, nao significa que devemos utilizar (tanto que o "clearfix" na real é um hacky)... Eu aboli o uso de frameworks como bootstrap em meus projetos exatamente por isso... Quando vi este exemplo da w3c eu saquei o pq o float foi criado e qual seu verdadeiro propósito... (float deveria ser utilizado só pra layouts onde temos uma imagem e um paragrafo onde o texto é fluido... +/- igual ao que vemos em jornais e talz) Links: goo.gl/ndUuGc goo.gl/xSMpUC E sobre grids baseadas em porcentagem, utilizar propriedades como "display: inline-block" fazem muito mais sentido Ó este exemplo de grid flexivel sem "float" github.com/MartinsThiago/bootsmacss/blob/master/grid.scss
Далее
MATERIAL DESIGN SLIDE TAB MENU (HTML5/CSS3/JQUERY)
24:28
UNIDADES CSS RELATIVAS: VW, VH, VMAX, VMIN (CSS3)
9:38
Conheça os recursos EM e REM no CSS3 🕵️‍♂️
8:04
[CSS] Unidades de medida em vs rem.
14:27
Просмотров 5 тыс.
Unveiling CSS Grid in practice | Mayk Brito
36:17
Просмотров 373 тыс.
The ch unit is the most underappreciated CSS unit
8:26
O que significa Vw e Vh | Curso de CSS e HTML
6:37
Просмотров 4 тыс.
PSEUDO-CLASSES DE ESTADO (CSS3/HTML5)
17:15
Просмотров 6 тыс.
Nav Toggle sem plugin • HTML5/CSS3/JS
12:41
Просмотров 23 тыс.
Variáveis CSS: O Jeito Certo
12:40
Просмотров 9 тыс.