Создание адаптивного сайта | Урок #2 — Верстка

Автор Lyudmila Yeriomenko
Создание адаптивного сайта | Урок #2 — Верстка

Привет всем в этом видеоуроке мы с вами создадим сайт адаптивный сайт создаётся при помощи в принципе CSS HTML в этом деле особо не помогает конечно же присутствует один метод который в принципе очень сильно помогает при создание адаптивного веб-сайта которые мы с.

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

Вот и так то есть вы перешли скопировать весь тубус примерно.

Точнее не примерно точно тоже самое вот будет вашим блокноте отображаться. Здесь всё. Всё как во всех нормальных сайтах идёт. Мы такие разные различные теги и прочее единственным отличием является вот этот метатег viewport. В чём его прелесть. Я специально открыл страничку одну где отлично объясняется вот этот так смотри если у нас нету. Мета тега viewport. Вот — это вода то в принципе на мобильных устройствах устройствах вот как здесь показано на. Айфоне наша страничка откроется. Ну наши странички просто текст Hello world и она таким вот образом. Hello World World очень-очень маленькая его практически не видно — это происходит потому, что страничка на мобильных устройствах в частности на смартфонах открыть в своем первоначальном виде то есть такая же как и она открывается на компьютере — это неудобно так как экран мобильника экран компьютера абсолютно разные вещи абсолютно разные ширину и высоту имеет. Поэтому нам нужно увеличивать страничку. Вот и META Tag viewport он сделает то, что страничка преобразуется к размерам экрана. Вот как вот здесь написано META Tag viewport и вот здесь Content with devices. ширина экрана будет подстраиваться под ширину девайсы и таким образом у нас — это запись hello-world отлично уже будет отображаться на мобильном устройстве то есть вот этот viewport он делает, что во-первых он обозначает то, что пользователь может ну как бы листать нашу страничку вверх-вниз спокойно. Вот — это вот user-scalable и значение да потом, а ширину мы устанавливаем как ширина одевайся и вот — это янишевский и. Максим съел — это в принципе просто вот как здесь вот нам задаёт начальный масштаб в принципе вот — это вот максимальный и начальный масштаб задаёт вот всё остальное в нашем входе в принципе такой же как и во всех нормальных сайтах здесь идёт минимум причём меню тоже с подвохом смотрите у нас здесь она во-первых будет срабатывать когда у нас страничка загрузится дальше мы менюшка покажу вам ещё раз вот — это меню мы прокручивать вниз и вот она сработала срабатывает она, тогда когда мы доходим до того момента, что наши вот эта шапка вся скрывается. Вот видите полностью она скрылась. Вот — это да она прикрепляется к топу к верхней части нашего браузера на страничке. Вот — это делается благодаря этим функциям то есть при. Если мы с ним нашу страничку. Когда будут происходить все наши действия если не скроем, тогда вообще никаких действий. Не происходят и. Значит мы определяем дистанцию к верху то есть куда нам надо считать. Ну то есть получается вот этот Menu Slide Menu на сына находится прямо нашим этим семью с кем-то вот буквально вот здесь вот — это находится слайм и если она если мы его уже пристали. То есть все взяли топ высоту сверху взяли от него, что мы проверяем. Если наша нашего данных в данный момент если мы пролетали дальше чем вот дистанция тут этого от этого блока, тогда мы добавляем новый стиль канашево менюшки менюшка у нас как раз на нуле fnaf до как fixed то есть фиксируем простоту новый стиль и мы добавляем и вот она. Таким образом фиксируются у нас сверху когда мы обратно его кидаем. Ну то есть вот здесь комментарии даже написано например. То есть если мы дошли до то, что вот до вот этого отметки назад пришли танабата меняет 5 и просто прикрепите его к верхушке сайта. Ну, что сделано поскольку на мобильных устройствах — это будет выглядеть не особо красиво видите такая штука будет занимать много места. Видите вот реально много места занимает поэтому мы сделаем так если устройство имеет ширину экрана меньше 8 пикселей когда эта функция. Вообще работы не будет всё работает только, тогда когда устройство имеет больше ширины экрана больше чем 800 пиксель — это тоже можно сказать немножко адаптивности сайта ведь ну реально будет помогать вот и всё, что дальше происходит необычное снимал которые в принципе можно даже не разбирать здесь обычный шоп меню. Ну основная часть боковая часть вот в принципе Footer всё тут больше ничего нету то есть — это маленький урок в принципе ничего опять мне сделали, но вы просто — это сейчас скопируйте и. Вставьте себе сайт у вас нужно будет работать без сейчас конечно сейчас мы будем всё ещё уроки с вами разберем полностью и полностью. Делаем его уже адаптивным вот в данный момент он такой адаптивный, но всё-таки мы ещё немножко добавил адаптивности.

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

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