CSS units for font-size: px, %, em, rem, vw, vh, vmin, vmax

  Рет қаралды 69,088

Анна Блок

Анна Блок

5 жыл бұрын

Visual aid on working with units CSS for font-size: px, %, em, rem, vw, vh, vmin, vmax.
Examples:
- codepen.io/anna_blok/pen/LvVgOq
- codepen.io/anna_blok/pen/bJdQXm
- codepen.io/anna_blok/pen/LvpQmX
- codepen.io/anna_blok/pen/BEoYPo
- codepen.io/anna_blok/pen/ROWyoj
______________
Buy Frontend Book - tpverstak.ru/frontendbook
Ask a question for free - frontendhelp.me/ru
______________
Website - tpverstak.ru
VK - tpverstak
Instagram - / tpverstak
Telegram - t.me/tpverstak и t.me/annbloknote
Telegram Chat - t.me/tpverstakchat
______________
Course "Super Start" - tpverstak.ru/super-start/
Feedback - topic-149247708_36129364
Basic course - tpverstak.ru/training/
Advanced course - tpverstak.ru/training-profi/
Feedback - topic-149247708_35960122

Пікірлер: 175
@KAMEKS
@KAMEKS 5 жыл бұрын
Аня, спасибо за труды! Дополню, что можно задать: html {font-size: 62.5%;} body {font-size: 1.4rem;} //если нужен дефолтный нормальный размер ну а дальше в нужных местах отталкиваться от 62.5% (он же 10px) и всё будет норм.... при этом, если необходимо будет масштабировать все размеры шрифтов, то надо будет только изменить размер в селекторе html, остальное подтянется пропорционально... ну это я так, объяснил немного по-другому для тех, кто не понял :)
@rv6819
@rv6819 3 жыл бұрын
задаете на html размер шрифта 1px, тогда на каждом элементе пиксели преобразуются в то же количество, но уже rem. То есть задаете вместо width: 200px -> width: 200rem. И все. Никаких дробей и есть масштабируемость.
@psix9618
@psix9618 2 жыл бұрын
@@rv6819 это легально вообще?
@mysteriousxcodesterio4434
@mysteriousxcodesterio4434 5 жыл бұрын
Анна спасибо большое, прошу вас не останавливайтесь мы ждет от вас помощи и объяснений в разных темах, спасибо что вы есть и помогаите нам) еще раз большое спасибо ваш труд очень важен для нас
@annblok_webdev
@annblok_webdev 5 жыл бұрын
Спасибо 😊
@VasyaStone8oy
@VasyaStone8oy 5 жыл бұрын
Ура! Ждал нового видео с нетерпением! Спасибо, Анна :) добра Вам!
@annblok_webdev
@annblok_webdev 5 жыл бұрын
Спасибо 😊
@justspartak
@justspartak 4 жыл бұрын
Видео супер! Спасибо, Анна!
@user-ji6xw2dx3t
@user-ji6xw2dx3t Жыл бұрын
Анна, спасибо за прекрасный разбор! Мне очень помогло!
@BigDaddy-zp6hz
@BigDaddy-zp6hz 3 жыл бұрын
умница, нет воды и все по делу рассказала
@alexpop2728
@alexpop2728 5 жыл бұрын
Спасибо за труды, но... видео без вывода. В каких случаях применять ту или иную размерность? Почему? Актуальность разновидности размерности на сегодняшний день. И на будущие, просьба рассмотреть стилизацию и , не в классическом виде (браузерная реализация), а в разрезе дизайн-макета (хотелок дизайнера).
@annblok_webdev
@annblok_webdev 5 жыл бұрын
Думаю, выводы я обозначу во второй части видео по этой теме
@astrotrain
@astrotrain 5 жыл бұрын
А что означает "в разрезе хотелок дизайнера" ?
@alexpop2728
@alexpop2728 5 жыл бұрын
@@astrotrain Высота/ширина/цвет/розовое пони - при наведении на пункт, говорит Здгаствуйте!
@justRamzes
@justRamzes 4 жыл бұрын
@@alexpop2728 плохо что ржачнЫх смайлов нету в ютубе)))
@romanown1361
@romanown1361 3 жыл бұрын
@@justRamzes вот когда надо отцентровать селект при открытии в моб отображении на айфоне, становится уже не до смеха. он просто не умеет это делать в своем сафари.
@olesiaeremina
@olesiaeremina Жыл бұрын
Анна, какая вы умница, спасибо вам большое за все эти уроки
@annblok_webdev
@annblok_webdev Жыл бұрын
☺️
@progerlife6690
@progerlife6690 5 жыл бұрын
Всегда использую при мобильной верстке vmin, и vmax. Спасибо за труды. Жду новые видео) Лайк)
@sergeyvorobev4387
@sergeyvorobev4387 5 жыл бұрын
Отлично и доходчиво, благодарю, стал лучше понимать в em и rem, давно хотел перейти на эти единицы)
@annblok_webdev
@annblok_webdev 5 жыл бұрын
😊
@fanfish9238
@fanfish9238 2 жыл бұрын
Спасибо за хорошие пример с rem, как раз не мог определится, использовать или нет, однозначно да)
@antonmaklakov
@antonmaklakov 3 жыл бұрын
Спасибо за разъясняющее видео! Обычно,когда я верстал,я чисто наугад подбирал единицы измерения,типо:"Ну,работает,и ладно" )
@annblok_webdev
@annblok_webdev 3 жыл бұрын
😂 думаю, много кто так делал в первое время
@user-pn2ev2je2l
@user-pn2ev2je2l 4 жыл бұрын
Благодарю Вас за видео.
@Sward66
@Sward66 2 жыл бұрын
Спасибо за полезное видео, я под конец уже стал засыпать от такого приятного голоса)
@zarant
@zarant Жыл бұрын
Какая красавица! Спасибо большое за такое прекрасное видео и Ваше личное сочетание красоты и ума!
@user-oi9eq7kb8j
@user-oi9eq7kb8j 4 жыл бұрын
Видос как нельзя к стати мне попался, много чего я оказывается не знала про единицы измерения, а что то даже забыла, большое спасибо за увлекательный и познавательный ролик
@annblok_webdev
@annblok_webdev 4 жыл бұрын
Рада, что ролик помог! 🤗
@iliyabrook2933
@iliyabrook2933 2 жыл бұрын
Спасибо! всё внятно и доходчиво =)
@Adaner1102
@Adaner1102 3 жыл бұрын
Спасибо, всё чётко и понятно!
@Tigran5233
@Tigran5233 3 жыл бұрын
3 вопроса Анне: 1) А если мы вместо селектора :root укажем селектор тега, т.е. html, будут ли работать rem у других элементов? 2) Можно ли, не прибегая к калькулятору, изменять значения в корневом каталоге, указывая в px или тогда rem у других селекторов сломается? 3) Я правильно понял, что vmin и vmax будут вычисляться относительно того, что меньше: если меньше высота, то относительно высоты, если ширина - то ширины, или механизм другой?
@evgeniyprowork
@evgeniyprowork 5 жыл бұрын
как вариант в зависимости от нужд и самого проекта можно обойтись этим: html, body { font-size: calc(1rem + 1vw); } или html, body { font-size: calc(1rem + 0.2vw); } или любой подходящий под проект вариант
@annblok_webdev
@annblok_webdev 5 жыл бұрын
Интересный метод. Никогда не использовала его 🤔
@MySergey23
@MySergey23 4 жыл бұрын
а можно ли указать и ширину и высоту? или это не имеет значения?
@giggsvea
@giggsvea 4 жыл бұрын
:root { font-size: calc(.5em + 1vw); } В качестве минимального размера шрифта здесь выступает 0,5 em, а 1 vw добавляет гибкую скалярную вели­чину. Это даст вам основной размер шрифта, который меняется от 11,75 пиксела на iPhone6 до 20 пикселов в окне браузера размером 1200 пикселов. Можете настроить эти значения как хотите. Теперь вы реализовали бОльшую часть своей адаптивной стратегии без единого медиазапроса. Вместо применения трех или четырех контрольных точек со сложным кодом все элементы страницы масштабируются плавно в соответствии с размером области просмотра. (Кит Грант - "CSS для профи" (2019) Глава 2 - Работа с относительными единицами - стр.74)
@ihabia
@ihabia 4 жыл бұрын
@@giggsvea Привет, заинтересовал данный метод ... единственное мне не понятно, вот сверстал ты макет, подогнал размеры шрифтов примерно или в перфект пиксель на определенном разрешении, а если на другом мониторе разрешение больше, получается все размеры с макета увеличатся? На уменьшение разрешения понятно, там адаптивность пошла, а вон на увеличение я не понимаю, всё же поедет. Да и в целом не понятно, на каком разрешении монитора то верстать ) или я что то путаю?
@giggsvea
@giggsvea 4 жыл бұрын
@@ihabia вы применяли данный метод на практике или просто в теории размышляете?
@janobrv4497
@janobrv4497 2 жыл бұрын
ты молодец куколка, СУПЕР!!!
@user-cm1pn5qq9q
@user-cm1pn5qq9q 5 жыл бұрын
Красота!!!
@gringo5058
@gringo5058 2 жыл бұрын
Коротко про EM и REM для тех кто не понял: это те же проценты (%) но в виде цельных или дробных чисел. Например: 150% = 1.5 ( так как что бы найти 150% от любого числа, его надо умножить на 150/100 то есть на 1,5) 80% = 0.8; 320% = 3,2; 17% = 0,17;
@user-pc5sr2sg7x
@user-pc5sr2sg7x Жыл бұрын
спасибо!
@gringo5058
@gringo5058 Жыл бұрын
@@user-pc5sr2sg7x 8 месяцев ждал этого 🤣
@user-pc5sr2sg7x
@user-pc5sr2sg7x Жыл бұрын
@@gringo5058 😁благодарность нашла своего героя
@user-je1tq2nu1o
@user-je1tq2nu1o 8 ай бұрын
Спасибо большое
@maxsilkov5683
@maxsilkov5683 4 жыл бұрын
Отличное видео
@blokactionchannel
@blokactionchannel 5 жыл бұрын
Супер, спасибо!
@arkadiipelsis8194
@arkadiipelsis8194 5 жыл бұрын
Ждем 2ю часть
@user-cb5xj1lg1l
@user-cb5xj1lg1l 5 жыл бұрын
Спасибо, Анна! Устал пользоваться гуглом. Теперь буду пересматривать этот видос
@annblok_webdev
@annblok_webdev 5 жыл бұрын
Замечательно 😊
@ajvakhrushev
@ajvakhrushev 11 ай бұрын
13:14 - в body прописывается 1,4rem и все счастливы 👌от боди будут отталкиваться уже все остальные
@eugenefedoryachenko8793
@eugenefedoryachenko8793 5 жыл бұрын
Оо, я давно хотел это узнать. Спасибо!
@cubuanic
@cubuanic 4 жыл бұрын
Использую мак прошку, 13" В новом табе в хроме, открываю дев-тулс и смотрю рассчитанные свойства для body, и вижу там что ширина 1280 пикселей. Почему так? Ведь у прошки ретина и у 13" ширина в пикселях - 2560
@user-gh9wq3fl6k
@user-gh9wq3fl6k 3 жыл бұрын
Какая красивая девушка! А взгляд завораживает!)))
@user-tc1qq5nm3x
@user-tc1qq5nm3x 4 жыл бұрын
Спасибо
@anvarturdaliev9834
@anvarturdaliev9834 2 жыл бұрын
у меня вопрос как узнать пикселей в процентах. например у меня: margin-top:500px и я хочу это указать в процентах? обший размер каркаса(контейнера) 1200px
@user-vd6eg5ke7i
@user-vd6eg5ke7i 5 жыл бұрын
Пару вопросов. 1. почему в html сразу не прописать fz:10px? 2 Думаю на данный момент производительности браузеров хватает сил rem перевести в px. После пары случаев кода клиенты при приемке проекта(4-10 страниц) вдруг потребовалась версия для слабовидящих резко перешел на rem. Собственно 2й вопрос зачем в px все переводить? Ради производительности?
@user-nn7il5zt4b
@user-nn7il5zt4b Жыл бұрын
Где можно приобрести такую книгу? Спасибо
@user-gn3if2jq8d
@user-gn3if2jq8d 5 жыл бұрын
Я использую html font-size 62.5%, и для body font-size x rem (где x- дефолт шрифт текста в макете 1.4-1.6rem обычно) по мне это самое удобное, перевод 10px в 1rem. И более удобно одним медиа запросом менять font-size для html.
@annblok_webdev
@annblok_webdev 5 жыл бұрын
Да, я как раз про это говорила в видео, но у этого метода есть один основной минус, это то, что придется переопределять стили для всех тегов, где будет содержаться текст
@ihabia
@ihabia 4 жыл бұрын
​@@annblok_webdev Анна спасибо за видео, раньше верстал в пикселях, вот теперь решил понять другие единицы. Только я не совсем понял, почему у метода выше существенный минус, ведь если допустим не 10px делать, а 14px, как вы в видео говорите, то всё равно же придется переопределять стили для всех тегов, где шрифт не 14px. Так ведь? Или я что-то не понял )
@annblok_webdev
@annblok_webdev 4 жыл бұрын
Иван Орлов в целом по сайту придётся меньше стилей переопределять. Если, конечно, какой-то элемент нужно увеличить или ещё уменьшить, то да, придётся решить вопрос локально. Но это гораздо меньше подключений, чем если бы мы работали с пикселями :)
@ihabia
@ihabia 4 жыл бұрын
@@annblok_webdev Анна, а ты сама какие единицы предпочитаешь использовать для font-size?
@annblok_webdev
@annblok_webdev 4 жыл бұрын
@@ihabia в основном - rem, для тестовых набросков - px
@dinastey8709
@dinastey8709 Жыл бұрын
Спасибо тебе за данное видео. Сам я Техник-программист, когда учился мы создовали сайты только в HTML мы даже не работали с CSS. Сейчас изучаю вёрсту, вот мои поиски привили к тебе. Спасибо что ведёшь блок для меня и других начинающих и опытных верстальщиков. Удачи тебе и здоровья)
@annblok_webdev
@annblok_webdev Жыл бұрын
Спасибо! 🙌
@nikolay_it_master
@nikolay_it_master 5 жыл бұрын
А что сами предпочитаете использовать в повседневной работе для web ?
@annblok_webdev
@annblok_webdev 5 жыл бұрын
Зависит от целей, но чаще всего это px и rem. Если работаю с codepen, то могу воспользоваться и vw
@vladi4507
@vladi4507 5 жыл бұрын
@@annblok_webdev скорее всего rem лучший вариант, потому что любой проект адаптируется под мобильные
@user-cm1om1oo3p
@user-cm1om1oo3p Жыл бұрын
О, Создатель! Я хочу от этой женщины ребёнка с такими же глазками как у неё.❤
@Zadrot1080p
@Zadrot1080p 4 жыл бұрын
А почему бы в примере 12:24 не использовать для :root размер в px?
@singlebw4065
@singlebw4065 3 жыл бұрын
Понты))
@tuRistst
@tuRistst 4 жыл бұрын
Вот эта прическа топ!
@user-ml5dv2zm8r
@user-ml5dv2zm8r 5 жыл бұрын
Спасибо за познавательный ролик) Расскажите подробнее, пожалуйста, в чем разница между % и ем. P.S. 400 не пикселей, а процентов.
@sadHamster
@sadHamster 5 жыл бұрын
Проценты идут от размера блока, а ем от заданного font-size. Т.е. если "font-size: 12px;", то 1 em = 12px. 1ем = 100%, 1.5ем = 150%, 2ем =200%. //Написал, не посмотрев видео. Похоже, вопрос был в другом.
@user-rk7ec4mj6v
@user-rk7ec4mj6v Жыл бұрын
Молодец
@user-pc9zs2xi6n
@user-pc9zs2xi6n 6 ай бұрын
Необычные глаза) радужка по краям черная, а ближе к зрачку синеет и светлеет))
@user-ym2ut1cr3e
@user-ym2ut1cr3e 5 жыл бұрын
Молодець)
@andrewluttera9921
@andrewluttera9921 5 жыл бұрын
Любимая стриммерка!))
@annblok_webdev
@annblok_webdev 5 жыл бұрын
Блогерка ещё скажи)))
@webmaster3984
@webmaster3984 Ай бұрын
а попадались на жизненном пути востребованные нетипичные вестальщики ?
@rickerscream666
@rickerscream666 7 ай бұрын
В её глаза можно смотреть вечно...
@user-ub2tb6dt4i
@user-ub2tb6dt4i 3 жыл бұрын
Почему так сложно, в случае с rem можно задать html, body font-size:16px (или 10 чтобы удобно было использовать rem) И при 10px, задаём элементу 1.6 rem получаем 16px, в медиа меняй в корне пиксели и ремы подстраиваются
@powerstator
@powerstator 5 жыл бұрын
это линзы?
@teosurch
@teosurch 2 жыл бұрын
Спасибо, очень помогла! P.S. Настолько голубых глаз в жизни эще не видел)
@IWannaSaySmth
@IWannaSaySmth 5 жыл бұрын
Аня, ты очень красивая ^^ И материал очень полезный. Лайк и подписка =D
@kovitamin
@kovitamin 3 жыл бұрын
а какие глаза!!! прям про CSS забываешь...
@yura_8952
@yura_8952 5 жыл бұрын
спасибо за видео! подскажи пожалуйста, как ты заряжаешь свой макбук? я его заряжаю до 98%, убираю с зарядки и разряжаю до 8%. Но я много работаю на нем и порой в день таких процессов может быть 2 и больше. или лучше постоянно держать его на зарядке, а ночью вытаскивать?
@annblok_webdev
@annblok_webdev 5 жыл бұрын
Обычно я делаю примерно также. Но если пребываю только в одной точке, то, как правило, все время на зарядке.
@yura_8952
@yura_8952 5 жыл бұрын
@@annblok_webdev спасибо! а она так не будет портится? имею ввиду зарядка. А то сколько читаю, некоторые пишут что если так держать, то он будет вздуваться, кто-то пишет , что все норм ...
@user-dp6yt7yc9l
@user-dp6yt7yc9l 5 жыл бұрын
@@yura_8952 Если не вынимать зарядку то батарея будет портиться меньше, лудше угробить зарядку чем батарею, если греется отключай периодически.
@Evgeniy19856
@Evgeniy19856 4 жыл бұрын
Юрий Аванесов Лучше вытащить батарею, иначе точно вздуется!
@singlebw4065
@singlebw4065 3 жыл бұрын
em вообще какой-то не такой. em - Разница между rem и em в том что rem в любой вложенности заставляет элементы смотреть на html или :root{}, получать там значение в px(любые единицы переводятся в px) и умножает на rem наследованный rem. em же заставляет брать элементам ближайшее родительское значение px и умножает на em. em какой-то не предсказуемый. С разными тегами именно во вложенности он по разному себя ведёт. Проблемы. 1. Нужно чётко следить сколько пикселей наследует блок(родитель) в котором хотим менять значения на em. Конечно же если манипулируем ещё пикселями. 2. Явление роста или уменьшения шрифта во вложенных списках друг в друга.(в div нет такого) 3. не наследует em. умножает свой em на ближайшие px, а вложенность наследует px не этого родителя, а выше
@Evgeniy19856
@Evgeniy19856 4 жыл бұрын
Не проще в :root указать px? Зачем в нём так выёживаться с em или rem?
@andrey7829
@andrey7829 5 жыл бұрын
Крутяк
@sergeyvideneev2164
@sergeyvideneev2164 3 жыл бұрын
Я в своих проектах использую только rem и не парюсь.
@bukanaka
@bukanaka 3 жыл бұрын
Ребята, я начинающий. Возник такой вопрос. Я вот смотрел на биржах фрилансеров заказы. И те из них, которые требуют верстки только на html, css и js ооооочень малое количество. В основном, заказы требующие "натянуть" сайт на какой-то CMS. Так вот и вопрос: возможно ли выйти новичку на зароботок, хоть и малый, но стабильный, с такой ситуацией с заказами? А за видео огромное спасибо! Наконец-то я понял эти величины. Вы молодец!
@bannano3o
@bannano3o Жыл бұрын
Привет, прошло 2 года, если ты еще живой, то расскажи, получилось у тебя начать зарабатывать или бросил?
@bukanaka
@bukanaka Жыл бұрын
@@bannano3o Ого, а я даже забыл что я такой комментарий оставлял. Да, я изучил Ангуляр и теперь работаю на нём уже год в кампании. Главное не забрасывать это дело: либо до конца и ты находишь работу, либо ты сдаешься. :) А на фриланс я не пошёл, не моё это было.
@bukanaka
@bukanaka Жыл бұрын
@@bannano3o Было трудно и нелегко, но оно того стоит
@bannano3o
@bannano3o Жыл бұрын
@@bukanaka , где теперь работаешь и на какой позиции, если не секрет? А еще конечно, какими знаниями обладаешь? Я тоже учусь, сейчас где-то на уровне чуть выше базового понимания верстки
@bukanaka
@bukanaka Жыл бұрын
@@bannano3o Ну, я уже на пути к миддлу как фронтенд разработчик. Работаю в кампании.
@a4yster
@a4yster 3 жыл бұрын
Анна, при объяснении процентов вы несколько раз оговариваетесь и путаете проценты с пикселями.
@amoradsohlghar9133
@amoradsohlghar9133 5 жыл бұрын
Доставка в Узбекистан имеется? я про (Frontend book)
@annblok_webdev
@annblok_webdev 5 жыл бұрын
Да, доставим :)
@muhamadaminibragimov5096
@muhamadaminibragimov5096 5 жыл бұрын
С процентами в font-size никогда не пользовался посмотрев видео понял что они для font-size работает точно так же как em вот только про это не упоминали
@dobrydyadka
@dobrydyadka 5 жыл бұрын
Ань, привет. Ролик получился отличный. Было бы классно, если б ты видео делала, как у Тревиса с канала DevTips, когда и код в кадре, и автора чуть-чуть. Харизмы у тебя хватает, а то что зрители отвлекаться будут, так это их проблемы 😁 Может кто-то подписывается, чтобы прийти на тебя посмотреть 😎
@annblok_webdev
@annblok_webdev 5 жыл бұрын
Привет, посмотрела его канал по наводке. Единственный минус демонстрации лица, на мой взгляд - случайно можно забыть, что определенная часть экрана будет перекрыта и это плохо(( Особенно, если там будет код. На некоторых видео есть такой косяк((
@dobrydyadka
@dobrydyadka 5 жыл бұрын
​@@annblok_webdev Моё дело маленькое - предложить 😊 И спасибо за ответ. Приятно, когда автор отвечает на сообщения, да ещё так оперативно 😉
@dobrydyadka
@dobrydyadka 5 жыл бұрын
@@user-et2me5vv4d 🤣🤣🤣
@Max-kr4ie
@Max-kr4ie 5 жыл бұрын
Текущий вариант вполне норм. И личико в начале. И нормально текст видно на весь размер. Правда одного меня наверно глаза пугают такие с линзами))
@user-yg2td1xk9n
@user-yg2td1xk9n 4 жыл бұрын
Лайк тожи поставил
@user-qm8sk5rs4e
@user-qm8sk5rs4e 4 жыл бұрын
Два раза пересмотрел, начиная на ем перестаю понимать.(
@teosurch
@teosurch 2 жыл бұрын
ем1.2- тоже что "Больше в 1.2 раза ". Больше чего? Больше чем контекст (родительский елемент).
@teosurch
@teosurch 2 жыл бұрын
Если про шрифт говорить
@jasonvoorhees8377
@jasonvoorhees8377 2 жыл бұрын
Рассказывает она конечно правильно но очень топорно
@APOCALIPSO1994
@APOCALIPSO1994 2 жыл бұрын
Анна, а вы не ошиблись с процентами, что 100% это 16px, а 200% это 32px? Потому что базовый же 16px, а 200% в два раза, этого не понял (5:38), попробовал и вроде ошибка.
@Snezh88k
@Snezh88k Жыл бұрын
берет процент от родительского компонента
@yaroslavlarin9912
@yaroslavlarin9912 4 жыл бұрын
4.08 - ...будут преобразовыватся в проценты - оговорочка. в пискели на самом деле
@Punjabi-Rajma
@Punjabi-Rajma 4 жыл бұрын
над в точку сделать, этот бук, можно и рисовать и писать
@tawt6260
@tawt6260 4 жыл бұрын
ай какая умка, молодец, и спасибо=)
@dimasikdimok6835
@dimasikdimok6835 Жыл бұрын
Так тебе намного лучше
@NewUser78654
@NewUser78654 Жыл бұрын
Не очень понятно зачем столько единиц измерения для шрифта. На практике видел только px и rem. Сам использовал rem с медиа запросами, для одинакового (пропорционального) отображения текста/элементов на разных разрешениях экрана. Единицы %, vw, vh видел как используют только для позиционирования - разделения областей, например ширина блока 30% экрана.
@sxntana7162
@sxntana7162 3 жыл бұрын
Ubuntu классный шрифт.
@astrotrain
@astrotrain 5 жыл бұрын
Я так делаю html font-size 62.5% // 10px body font-size 1.6rem // 16px Неправильно, да?
@annblok_webdev
@annblok_webdev 5 жыл бұрын
10px в качестве базы - не лучшее решение, т.к. придется переопределять font-size для всех тегов, где будет содержаться текст, следовательно будет больше CSS кода в файле, что будет влиять на его вес. Это особенно актуально для крупных проектов. Лучше за базу взять от 13px до 16px (что и так стоит по умолчанию).
@astrotrain
@astrotrain 5 жыл бұрын
@@annblok_webdev ну вот я в бади его и возвращаю в 16px
@annblok_webdev
@annblok_webdev 5 жыл бұрын
@@astrotrain Точно, первое ваше сообщение забыла развернуть. В целом, этот метод тоже имеет место быть. Только хотела уточнить, почему в html вы используете именно %, а не em, например?
@astrotrain
@astrotrain 5 жыл бұрын
@@annblok_webdev ну проценты мне как-то привычнее всё-таки, чем em, а в таком применении думаю одно и то же будет. em пока стараюсь не применять повсеместно, как-то опасно выглядит зависимость друг от друга по цепочке Клиент в админке сделает какую-нибудь непредусмотренную вложенность в статье и текст будет уменьшаться или увеличиваться как у вас во вложенных списках, страшно)))
@muhamadaminibragimov5096
@muhamadaminibragimov5096 5 жыл бұрын
@@annblok_webdev зачем туда просто не писать в пикселях?
@AlexLee-do4min
@AlexLee-do4min 4 жыл бұрын
Всё... влюбился... Подписываюсь однозначно! ))
@DubinArtur
@DubinArtur 3 жыл бұрын
Она так смотрит, что мне страшно
@annblok_webdev
@annblok_webdev 3 жыл бұрын
Веб-разработка не для слабонервных
@dm.hol.3624
@dm.hol.3624 2 жыл бұрын
Согласен, было желание отодвинуться от монитора, лол, слишком близко и взгляд неестественно пронзительный))
@igorblagoy6718
@igorblagoy6718 5 жыл бұрын
5:47 оговорка
@annblok_webdev
@annblok_webdev 5 жыл бұрын
Все верно
@igorblagoy6718
@igorblagoy6718 3 жыл бұрын
@@annblok_webdev как значение в 400 px "в два раза больше" может стать 32 px ?
@igorblagoy6718
@igorblagoy6718 3 жыл бұрын
@@annblok_webdev 4:08 еще одна оговорка
@smert-chekistam
@smert-chekistam 3 жыл бұрын
Анна, зачем ты мучиешь себя контактными линзами?
@TakVkusno
@TakVkusno 5 жыл бұрын
Шаришь однако!!!
@annblok_webdev
@annblok_webdev 5 жыл бұрын
😊👍🏻
@DmitrijKurandin
@DmitrijKurandin 5 жыл бұрын
PX в CSS не всегда физический, особенно на экранах с большей плотностью пикселей
@annblok_webdev
@annblok_webdev 5 жыл бұрын
Сейчас это актуально только в отношении к экранам Retina.
@DmitrijKurandin
@DmitrijKurandin 5 жыл бұрын
@@annblok_webdev тобишь почти для всех телефонов, как как у них часто разрешение больше чем у ноутбуков
@kubiknoobik7856
@kubiknoobik7856 4 жыл бұрын
ежедневник классный, сразу захотел себе такой и перешёл на сайт, чтобы купить.... и не купил( Анна, 2500 за ежедневник, ну камон((( я лучше за 1500 куплю JS от флэнагана на 1к страниц(
@andrei8299
@andrei8299 4 жыл бұрын
чувак. контент у нее может и ок вроде, но вот эти приколы=). И ведь люди реально берут эту макулатуру за 2500
@user-dp6yt7yc9l
@user-dp6yt7yc9l 5 жыл бұрын
В чем прикол использовать в root проценты или рэмы, высчитывать что-то с калькулятором? html font-size: 1px body font-size: 16rem; .header font-size: 25rem В коде которым вы собираетесь делиться не должно быть rem, хрен знает как его будет использовать другой.
@pyatka2008
@pyatka2008 2 жыл бұрын
Жалко книжку в 2022 не купить(
@opusdv3503
@opusdv3503 5 жыл бұрын
Блин это реальные глаза или линзы?
@astrotrain
@astrotrain 5 жыл бұрын
Это не глаза, это глазишча! ((:
@user-du1dm9uv8b
@user-du1dm9uv8b 5 жыл бұрын
это линзы, но суть не в этом.. Умна чертовка!
@FTDen45
@FTDen45 4 жыл бұрын
+
@user-ie8rl1de7n
@user-ie8rl1de7n 4 жыл бұрын
Такое впечатление, что у Анны первый иностранный был французский )) V - это "ви", не "уи" )) хотя , французский ,согласитесь, ей больше был бы к лицу)) милая)
@or-bit3186
@or-bit3186 3 жыл бұрын
.
@aliday9968
@aliday9968 5 жыл бұрын
Давайте без "давайте"
@annblok_webdev
@annblok_webdev 5 жыл бұрын
Ок, босс
@gagogoga794
@gagogoga794 2 жыл бұрын
Уважаемая когда произносишь i у тебя больше ы получается. Это колхозно звучит.
@nefedov984
@nefedov984 5 жыл бұрын
Почему нельзя было в шараге , с такой подачей учить :)...... лучше объяснения данной темы не найти .
@dobrydyadka
@dobrydyadka 5 жыл бұрын
Не в каждой шараге препод болеет за свой предмет )
@annblok_webdev
@annblok_webdev 5 жыл бұрын
В шараге вебу учат? 🤔 Я что-то пропустила в системе образования?
@dobrydyadka
@dobrydyadka 5 жыл бұрын
Типичный Верстальщик ну если под шарагой понимать техникум, то да, учат 😊
@sns76
@sns76 4 жыл бұрын
Девушка, слишком много рекламы, мысль теряется. Если б это был развлекательный ролик, куда ни шло. Вы забываете, что сейчас ютуб ставит две рекламы подряд за один раз. Смотреть их одно мучение. Я могу еще потерпеть рекламу в конце и в начале ролика и всё. Можно конечно пропустить, но эти пять секунд на два бесят!!!
@justRamzes
@justRamzes 4 жыл бұрын
бесит вот это "lorem" да ещё и "Ipsum" бєєє, и подобное на латыни, Почему народ это использует??
@user-yg2td1xk9n
@user-yg2td1xk9n 4 жыл бұрын
Дизлайк👍👍👍
@mykhaylolytvynov5369
@mykhaylolytvynov5369 3 жыл бұрын
Слабенько
СҰЛТАН СҮЛЕЙМАНДАР | bayGUYS
24:46
bayGUYS
Рет қаралды 752 М.
Когда на улице Маябрь 😈 #марьяна #шортс
00:17
КАК СПРЯТАТЬ КОНФЕТЫ
00:59
123 GO! Shorts Russian
Рет қаралды 2,9 МЛН
NO NO NO YES! (50 MLN SUBSCRIBERS CHALLENGE!) #shorts
00:26
PANDA BOI
Рет қаралды 102 МЛН
TOP 20 typical errors in website layout
11:51
Анна Блок
Рет қаралды 92 М.
Урок 2. Единицы измерения CSS: px, em, rem, %, vw, vh, vmin, vmax, ex, ch
16:33
Елена Литвинова — Искусство Веб-разработки 🛸
Рет қаралды 4,1 М.
CSS Pseudo elements Before and After: Examples
11:55
Анна Блок
Рет қаралды 101 М.
Are you using the right CSS units?
6:30
Kevin Powell
Рет қаралды 440 М.
Learn CSS Units In 8 Minutes
8:48
Web Dev Simplified
Рет қаралды 222 М.
Никогда не пиши margin, padding и border в CSS
8:11
Анна Блок
Рет қаралды 63 М.
СҰЛТАН СҮЛЕЙМАНДАР | bayGUYS
24:46
bayGUYS
Рет қаралды 752 М.