Практическая верстка. Unit 10. Адаптивные размеры сайта и шрифты

Автор Artur Merichev
Практическая верстка. Unit 10. Адаптивные размеры сайта и шрифты

друзья с вами лущенко.

Александр и мы продолжаем курс практической верстки. Сегодня у нас очень интересная тема — это мобильная верстка которая не я — это сложно, но является обязательной для начинающих верстальщиков и так мы с вами начинаем мобильную верстку можно разделить на два направления первое направление — это так называемая резиновая верстка когда мы уходим от абсолютных единиц измерения к относительным второе направление — это адаптивное responsible верстка которая позволяет перестраивать блоки под различные начнем с самого простого. Давайте перейдем от абсолютных единиц к относительным и так нам понадобится стандартный наш набор — это кстати набор материалов доступен платным подписчикам те кто купили курс у нас стандартная HTML.

Папочка и майонез и папка CSS файлы пустые специальная удалил чтобы начать с чистого листа и так начали попытаемся перейти от абсолютных единиц к относительным для того чтобы начать я сделаю Block Main которому жестко задан следующей стиль ширина 1000 пиксели высота 300 чтобы он выровнялся по центру я сделаю Magnum 200 пикселей авто то есть доступ сверху и снизу по 200 снизу справа слева автоматический edamame какой-нибудь баграм, что мы его видели допустим Pink проверяем мы забыли подключить CSS видите — это нормально CSS Style CSS есть и результат нашей работы вот он блок с этим всё в порядке всё работает вот так вот он виден полностью давайте я здесь тоже сделаю вот таким вот образом.

О'кей У нас есть блок его размеры прописаны жёсткая напомню 1000 на 300 продублирую вот эти вот надписи чтобы. Мы понимали. Вот он. Давайте внутреннего сделаем ещё один блок которому зададим размеры 100 на 100 — это у нас будет блок тест ширина 100 высота 100 пикселей background пусть будет. Ну давайте сон. Пиф в принципе достаточно вот он — это честно размерами блок 100 на 100 пикселей давайте мы проверим не вру ли я вот блок высота 100 на 100. Теперь давайте перейдем от относите абсолютных единиц пикселей к относительным когда говорят о резиновой верстки практически всегда профессиональные верстальщик имею в виду проценты. Что такое процент процент — это указание чего-либо какого-либо. Измерь относительно другой единицы то есть больше на 200% больше в два раза 50% меньше в 2 раза и так далее. Здесь очень важно понять относительно берутся проценты. Давайте я вам сделаю ширину равную 10% сохраняю и так изменилась ширину. Посмотрите пожалуйста ничего не поменялось вот здесь у меня стоит 10% сработало и фактическая ширина стола 150 она была 100 пикселя настала ступица или то есть 10% взялись от родителя ширина которого 1000 и поэтому вот этот блок 10% от 1000 — — это 100 давайте я поставлю 20% относительно родителя стало 200 пикселей. Вот — это ширина вот эти 200 пикселей. То есть когда. Я указываю ширину в процентах она берётся относительно ширины родителя если у меня родитель станет 500 пикселей то внутренний блок 20% от 500 мы получаем 100 если я поставлю тут 50% то он должен стать 250 увидите математика всё работает возвращают тысячу обратно и оставлю 50% ширины теперь ширина моего блока составляет 500 половину от 1.000 до давайте мы попробуем с высотой я задам высоту 10%, что получилось высота стола 30 напомни, что высота родителя 300 пикселей 10% от 300 — — это 30 в соответствии с я поставлю 20% то высота будет 60 если я поставлю 100% кто будет высота кто же 300, но посылка нас есть буквы то вылезли на размер букв. Ну с этим в общем-то хорошо. Всё понятно. Давайте мы теперь зададим. Марджанджа Марджанджа 10% то есть и верхний и нижний будут 10%. Давайте смерть, что получилось в начале начнем слева manjaro левый margin 10% взял. Нет ширины вот этого блока поскольку 10% от его ширины было бы 50 он взялся от ширины родителя то есть внимание правый и левый. Маржан берется от ширины родителя не от ширины элемента которые пишутся проценты — это процент ширины родителя то есть вот этого блока дальше, но верхний и нижний тоже стали 10% равны 100 и все машины все высоты правый левый нижний верхний любой берутся всегда от ширины родителя не от высоты высота если не влияет ни коим образом на образование маржана. Поэтому просто запомнить. Когда вы пишете машин в процентах. Вы должны эти проценты считать от ширины всего блока высота никоим образом не влияет — это легко доказать поставлю высоту 100 пиксели. Вот она посмотрите какие машины машины остались 100 сверху 100 снизу. То есть — это явно не 10% от 100. Это 10% от ширины от тысяч. О'кей верну обратно теперь перейдем к поединкам поединка 2%. Давайте смотреть какой у нас. Поедем поедим как оказался 22 од 1000 — это 20 то есть спиннинги тоже берутся от ширины родителя — это очень важно. Таким образом мы поработали с абсолютными и относительными единицами. И запомни ширина в процентах выставлена блока проценты считаются от ширины родителя высота блока от высоты родителя. Марджани Пингвины считаются от ширины родителя высота рыбный никак не влияют на данные блоки думаю с этим проблем нет стоит только посидеть раз вот так вот попрактиковаться по выставлять жестко фиксированные блоки и думаю проблем не будет. Я за комментируя этот блок и расскажу ещё одних относительных единицах пусть у меня будет блок.

0 комментариев
0

Читайте также