Создание адаптивного сайта | Урок #3 — Пишем CSS

Автор Zhanna Belchenko
Создание адаптивного сайта | Урок #3 — Пишем CSS

Ну, что же в этом уроке мы с вами уже создадим сес в принципе я в прошлом уроке немного.

Забыл И сейчас я — это исправлю смотрите у вас все картинки вот так вот отображались и в принципе шрифты все отображались. У вас должны быть правильно настроенный все папочки. Ну никого тут особого фэн-шуй.

Нет просто вот index.php — это мой основной документ в котором в принципе весь и кот находится.

Вот этот который в прошлом уроке мы сами рассматривали потом есть. Папочка и MG. Давай зайдем в ней есть ну прям. СПС — это типа вот — это вот. Спасибо дальше есть. Папочка со слова в которой находится вот этим для картинки для футера. Вот и есть. Папочка Арт в которой находится вот — это вот одна основная картинка поэтому хотите чтобы вас все картинки отображались. Вам необходимо так сама просто я в сети папочки либо же в яндекс. PHP или у вас может тема заменить вот здесь вот и mg-100 Shell YouTube ну и так далее вот тоже самое с шрифтами вот у меня здесь используется свой шрифт который я скачал его. Папочка Фолз и здесь вот он называется обеликс. ну — это вот ну исчез у нас просто папочки сейчас тут стою то есть вот эти вот образом растяните шрифты папка mtow восходит в точности так же как и у меня вот теперь непосредственно к уроку и так чтобы создать адаптивный в принципе существует три вещи для создания адаптивных сайтов. Первое — это все ваши блоки не под какие-то конкретные размеры например вот как здесь Body 1440 пикселей его ширина, а под какие-то, а потом под проценты. То есть она пример Body. Мы всегда знаем, что наши Tag Body он должен быть 100% то, что должен занимать 100% ширины экрана отсюдова до и до конца до. Чудово до 100%. Поэтому всегда прописываются обычного для адаптивной верстки и дизайна списываются всегда в процентах все ширины все там ширина или высота прописываются в процентах например 100% height тоже 100% например представим, что например нам нужно. Ну, тогда 1 на 1 из 3. Наш первый элемент который помогает при создание адаптивной адаптивного сайта к стальным двум мы еще. Вернемся представим, что нам необходимо Body чтобы у него были некие отступы например. Ну например менеджеров у него должен быть 50 пикселей к примеру. Вот мы гуляем в принципе обновляем как бы, но он что-то очень медленно не обновляется обновился всё-таки вот в принципе нас тут ничего не произошло — это всё из-за того, что у меня тут просто поставили на моём сайте кеширования CSS файла. Поэтому в принципе он просто уже запомнил предыдущую версию файла и новую версию ещё не обработал индоссирование если не можешь в. Интернете посмотреть, что — это такое вот поэтому не увидели. Ну всё же если мы хотим сделать отступ слева да и например 50 пикселей мы знаем, что если я сделаю вот подобную вещь то у нас уже будет наш. Ну то есть ширина у него 100%. А мы ещё 50 пикселей добавили. То есть он всегда у нас будет больше чем наши размер экрана на 50 пикселей всегда будет выступать всегда будет некрасиво, но он у нас будет некрасиво как-то сделать здесь опять-таки два метода мы можем применить свойства css3 с третьей версией. Там появляется свойства который называется как она позволяет поднимать его добавлять. Например если бы нас здесь были пиксели. Да там 140 Pixel -20 Excel она бы — это прочитал и вывела бы как 120 пикселей ширина было бы 120 пикселей, но она позволяет намного больше ещё — это функция. Она позволяет от процентов вот 100% у нас есть до поднимать наши какие-то на наши нужно какие-то там вещи например 50 пикселей нашем случае да у нас мы занимаемся 100% ширины экрана и отнимаем от этого 50. Пикси наша цпсир таким образом опять у нас будет наш будет всегда равен 100 процентам. Вот то есть вот такой вот вот вот такой. А также опять-таки всё задавать в процентах например мы можем задать,, что процентов мы можем задать margin в процентах подобрать немножко места Pixel проценты подобрать например поставить там 5% такие мы знаем, что теперь наши боги будет 105% опять таки он будет вылазить, но с процентами всё проще чем мы можем просто здесь теперь поставить 95% и опять-таки нашего где будет меняться 100%. чему — это вообще всё рассказываю всегда размеры размеров адаптивным сайтах всегда нужно указывать в процентах. Каким образом они все подстраиваться под размер экрана. Например у нас у нас удалим — это всё в принципе ставим 100% у нас наш наша шапка она равна 98%, но при этом pending по высоте у нас по 0 5%. А по ширине то есть справа и слева будет по одному проценту 1% слева и один процент справа будет отступы. Вот поэтому у нас 98% чтобы шапка всегда было 100% таким образом шапка у нас не вылазит введите ну она не вылазит. Да вот и если я буду увеличивать размер экрана до либо же можно его не просто увеличить. А в в Google — это можно делать с помощью консоли здесь и такая прекрасная кнопочка вот она помогает нам в принципе прочувствовать как бы на преобразовать сайт к любому размеру. Вот такая вот штука чтобы. Откройте консоль и вот здесь вот вот такой вот видите телефончика будет у вас иконка нажмите, а потом может расстёгивать свой сайт как угодно. Проверяй его адаптивность вот так к чему я клоню, что видите на шапка всегда подстраивается под размер экрана вот неважно насколько я буду навсегда будет расцениваться именно под размер экрана потому, что она в процентах и так и наши вот это.

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

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