Создание адаптивных сайтов урок третий гибридная верстка

Автор Liza Merichenko
Создание адаптивных сайтов   урок третий  гибридная верстка

Всем привет.

Вы смотрите лубок — это продолжение курса верстка адаптивных сайтов и сегодня мы рассмотрим еще один вид тверским разметки эта гибридная версия на самом деле — это наиболее часто используемые в верстке. Сегодня мы рассмотрим такой вариант как вы помните. На прошлом уроке мы научились.

Как делать гибкую разметку также её можно назвать резиновый.

То есть когда у вас всё соотношение в процентах идёт. Это первый элемент использовано отзывчивого дизайна который входит во всю концепцию адаптивного дизайна и адаптивной верстке так вот и сегодня мы рассмотрим гибрид — это смесь статической и резиновый у нас гибкий sidebar, но мы рассмотрим такой вариант. Когда в нашем сайте есть изображения с фиксированным с фиксированным размером. Спасатель дальнейших уроках — это как раз таки и будет вторая составляющая части отзывчивый который я упоминал вам внимательно смотрели 1 вводный урок как называется Flexible. Медео то есть. Египте меди куда входит изображение видео и так далее. Сегодня мы именно рассматриваем вариант когда. Как можно обойтись без этого и иногда такое вёрстка используется не скажу, что — это лучший вариант, но узнать о нём надо поэтому рассмотрим. Я подготовил тут небольшую картинку гифку для нас с марлоном брандо у меня примерно так сегодня мы, наш sidebar так прикидываю папка папку сюда отлично. Теперь внутри нашей верстки. Давайте заменим. Весь этот текст на изображении так сохраняем и смотрю в браузере, что у нас получилось как мы видим картинка вышла за пределы сайдботтом как. Неудивительно потому, что она больше, что же стоит сделать с этим мы оставим на ширину резиновый, но воспользуемся. Кто такой фишка Display Table. Если вы уже несколько лет в. Рязани то вы в принципе должны том, что таблице имеет некоторые полезные свойства надо было и раньше была такая так называемая табличная верстка которая ушла в небытие. Я до сих пор можно встретить. В чём были плюсы таблиц потому, что у их ячеек было есть свойства принимать ширину контента которые. То есть когда изображение находится внутри табличный ячейки та самая чеки принимает ширину размера этого изображения, что мы сейчас попробуем сделать мы сделаем нашу секцию и sidebar табличные чайками то есть именно режим — это выражение у них будет как у обычных вещей на самом деле — это не таблицы и табличные ячейки — это именно эмуляция их с помощью свойство Display. Но именно — это эмуляции мы воспользуемся для ножей сибирских так здесь резина мы оставляем неудаляемые здесь соответственно ненужными flottweg не float right. Петербург также если, что нам понравится. Это дисплей s-tell изображать как обычно ячейка для утра тоже. И теперь посмотрим, что у нас получилось как мы видим теперь изображение полностью занимает весь sidebar и самое интересное и важное, что вторая часть оставшихся. Она всегда просто занимает to оставшуюся часть от главного изображения нефиксированное если растягивается по ней и утром надо делать ролл . нашёл вниз, но как увидеть и — это далеко не идеальный вариант. Потому, что если мы сажаем до более маленького размера. Когда уже фиксированные становится меньше наших размер — это наши резко становится неактивной то есть на мобильных устройствах надо будет так криво смотреться и как делать — это правильно по адаптивному смотрю будущих уроках, но наконец-то уроков должны знать, что существует гибридная верстка когда несколько способов статичная и резиновая смешанного. Но на этом всё до скорой встречи. Всем пока.

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

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