Как уменьшить блок при уменьшении окна браузера
Идеальные горизонтальные блоки в HTML & CSS
Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS.
Также пропустим ту часть, где я рассказываю, что у меня была мечта создать идеальный шаблон с 100% адаптацией и кроссбраузерностью. В просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код.
Данная статья более подойдет для новичков в веб-разработке, и я хочу поделиться им, ведь новички — это свежие умы, которые рано или поздно заменят старых нудных кодеров.
Наша цель сделать 3-х колоночный сайт, блоки которого будут:
- Уменьшаться в зависимости от размера экрана (т.е. не будут уходить вниз);
- Растягиваться по всей ширине экрана (обычно это 2-х колоночный сайт);
- Адаптироваться при уменьшении заданных размеров.
Далее будет логично написать стили для этих классов, что мы и сделаем:
Размер окна браузера больше 900px
Размер окна браузера меньше 900px
Иногда нужно, чтобы дизайн сайта не сразу адаптировался под конкретные размеры, т.е. не исчезали какие-либо части сайта, а сохранялся весь функционал просто с уменьшением их размера.
Для того, чтобы растянуть дизайн на всю ширину экрана, достаточно удалить свойство max-width:700px в классе main .
Чтобы дизайн полностью не уменьшался при малых размерах окна, а адаптировался добавляем в стили @media запрос:
Более подробно можно посмотреть здесь — приветствуется любое изменение кода в лучшую его сторону.
Адаптивные изображения: 5 трюков CSS для экономии времени
У веб-разработчика два врага: дедлайны и изображения. Хватит пытаться втиснуть картинку в макет! Вот 5 методов для полного контроля над графикой.
Если вы встречались с коварными изображениями, которые никак не хотели подстраиваться под макет, эти техники вам точно помогут.
Добавление margin для создания двухколонного макета
Пример 2. Двухколонный макет
При таком способе верстки при уменьшении ширины окна браузера слои остаются на своих исходных местах, но появляется горизонтальная полоса прокрутки. Также наблюдаются небольшие различия в браузерах, связанные с полями и отступами вокруг текста, расположенного внутри колонок. Но эти отличия не существенны и легко корректируются за счет применения свойств padding и margin .
Если внизу после колонок предполагается разместить еще один слой, то для него следует использовать стилевое свойство clear . Дело в том, что браузеры по-разному располагают этот нижележащий слой, поэтому следует отменить действие обтекания, что clear как раз и делает (пример 3).
Пример 3. Применение свойства clear
Стиль для данного примера останется неизменным и только добавляется тег с атрибутом style="clear: left" . Значение свойства clear обычно совпадает со значением float .
Масштабирование сайта под окно браузера
Масштабирование сайта под окно браузера
Доброго времени суток. Подскажите, пожалуйста, способы масштабирования сайта под браузер, из.
Как подогнать картинку под окно браузера?
Подскажите пожалуйста можно ли подогнать картинку под размер окна браузера??тоесть при увеличении.
Синхронное изменение размера фона под окно браузера
Всем привет. Ребята, я не совсем силён в программировании и создании сайта. Но однако при его.
Использование свойства float
Чтобы расположить два слоя рядом друг с другом по горизонтали, воспользуемся стилевым свойством float со значением left . Эта конструкция говорит, что слой необходимо выровнять по левому краю и обтекать его по правой стороне. Таким образом, рядом лежащий второй слой будет пристыкован к первому справа.
Теоретически, свойство float достаточно задавать лишь для одного слоя из двух. Однако браузер Internet Explorer в этом случае между слоями добавляет небольшой промежуток, что не всегда желательно, а Firefox накладывает слои друг на друга. Чтобы все смотрелось именно так, как хочется, float следует указывать для всех слоев (пример 1).
Пример 1. Добавление свойства float
Высота слоев определяется их содержимым, поэтому подход, показанный в данном примере, создаст две прямоугольные области разной высоты и цвета.
Главной особенностью приведенного подхода является тот момент, что при уменьшении окна браузера до 750 пикселов и меньше, слои располагаются по вертикали друг под другом (рис. 1). Иными словами, макет «рассыпается» на отдельные блоки.
Рис. 1. Вид макета при уменьшении размера окна браузера
Чтобы подобная ситуация не происходила, следует воспользоваться свойством margin .
Использование свойства float
Чтобы расположить два слоя рядом друг с другом по горизонтали, воспользуемся стилевым свойством float со значением left . Эта конструкция говорит, что слой необходимо выровнять по левому краю и обтекать его по правой стороне. Таким образом, рядом лежащий второй слой будет пристыкован к первому справа.
Теоретически, свойство float достаточно задавать лишь для одного слоя из двух. Однако браузер Internet Explorer в этом случае между слоями добавляет небольшой промежуток, что не всегда желательно, а Firefox накладывает слои друг на друга. Чтобы все смотрелось именно так, как хочется, float следует указывать для всех слоев (пример 1).
Пример 1. Добавление свойства float
Высота слоев определяется их содержимым, поэтому подход, показанный в данном примере, создаст две прямоугольные области разной высоты и цвета.
Главной особенностью приведенного подхода является тот момент, что при уменьшении окна браузера до 750 пикселов и меньше, слои располагаются по вертикали друг под другом (рис. 1). Иными словами, макет «рассыпается» на отдельные блоки.
Рис. 1. Вид макета при уменьшении размера окна браузера
Чтобы подобная ситуация не происходила, следует воспользоваться свойством margin .
Масштабирование изображений при сжатии окна браузера
Сжатие таблицы при сжатии окна браузера
Здравствуйте, кто нибудь объясните пожалуйста как сделать так, чтобы таблица на сайте сжималась.
Сдвигаются текстуры при сжатии окна браузера
при сжатии браузера примерно в 1/4 монитора все текстурф почему то сдвигаются. сайт.
Сьезжает контент на странице при масштабирование окна браузера
При уменьшении окна браузера на 25% у меня весь контент вместе с хедером и дивом сьзжает в влево.
Простое решение
Вероятно, вы его уже знаете и не раз использовали:
Если у вас не очень сложная разметка, эту технику можно использовать везде.
Решение Netflix
Этот трюк работает везде и требует только обернуть изображение в дополнительный контейнер. Пропорции сохраняются с помощью паддингов, заданных в процентах, а картинка абсолютно позиционируется.
Эта техника может показаться сложной, но она стоит того, чтобы потратить время и разобраться. Ее используют многие сайты, включая Netflix!
Сохраняем пропорции высоты и ширины элемента при изменении ширины контента на чистом CSS
Как пропорционально уменьшать ширину и высоту различных элементов при изменении ширины родительского контейнера?
Для изображений это делается очень просто, задаем свойству height значение auto , при этом максимальную ширину изображения ограничиваем шириной родительского контейнера max-width: 100%;
Резюме
При верстке двухколонного макета очень часто применяется свойство float , который добавляется к каждому слою. Хотя этот атрибут предназначен для создания обтекания, за счет своей универсальности он уже давно взят на вооружение верстальщиков. Принцип его применения следующий. Вокруг слоя при добавлении float создается обтекание, но поскольку ширина каждого слоя жестко задана, то слои располагаются не друг под другом, а рядом по горизонтали. При этом и формируются колонки макета.
Такой способ создания многоколонного макета имеет и определенный недостаток, который проявляется в том, что при уменьшении окна браузера до определенной величины, колонки «перепрыгивают» одна под другую. Чтобы этого избежать дополнительно используют стилевое свойство margin-left , добавляя его к правой колонке. В таком случае слои остаются на своих исходных местах, независимо от размеров окна браузера.
Как сделать, чтобы при уменьшении экрана картинка сжималась равномерно с обоих концов?
Вот часть разметки HTML
И стили для разметки выше
Контент
И вот трюк: мы просто позиционируем блок контента как абсолютный со всеми четырьмя ориентациями, установленными в 0. Это просто покрывает родительский элемент полностью, независимо от того, какой размер он имеет.
Вот и все. Блестяще, не так ли? Даже padding не сломает его, и нет необходимости в box-sizing: border-box здесь.
Другие пропорции
Если вы хотите создать другие коэффициенты, просто измените значение padding-top псевдоэлемента:
IE7 и ниже
Рабочий пример на CodePen:
Есть второй вариант без псевдоэлементов, но при его использовании блок всегда имеет ширину 100%, поэтому если нужно несколько таких блоков в ряд, то они должны быть помещены в какой-то родитель, у которого уже будет задана нужная ширина относительно остальных элементов на странице.
Как сделать один сайт для всех устройств (Responsive Web Design)
Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:
Почему это глупо
Во-первых, никто не сможет предугадать, какими устройствами будут пользоваться ваши посетители. Нужно ориентироваться не на устройства, а на разрешения.
Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).
Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».
Как сделать один сайт для всех устройств
Вопросы, которые поднимал автор вышеуказанной статьи, уже довольно давно в цивилизованном мире обдуманы, и, более того, они уже решены.
Все это называется «Responsive Web Design»
Responsive состоит из следующих техник:
Резиновый макет на основе пропорций (fluid grid)
Основная идея — формула для вычисления пропорций в процентах «target / context = result». Например, у нас есть макет psd с шириной 1000px. В нем есть два блока: один слева шириной 270px, другой справа 730px. Сверстаем мы их так:
.leftcolumn <
width : 27 % ; /* 270px / 1000px = 0,27 */
float : left ;
>
.rightcolumn <
width : 73 % ; /* 730px / 1000px = 0,73 */
float : right ;
>
Если внутри левого столбца будет еще один блок и, скажем, на макете он шириной в 170px, то для него поменяются цель и контекст, и код будет выглядеть вот так:
Резиновые изображения (fluid images)
Подстраивают свои размеры под блок родителя. Основная идея в неочевидном применении свойства < max-width: 100% >. Изображение с img < max-width: 100% >никогда не вылезет из своего блока-родителя.
Если блок-родитель меньше, чем размеры img, то изображение пропорционально уменьшится. Этот принцип применим как для img, так и для embed, object, video.
Media queries
Нужны для отображения макета, оптимизированного под разрешение, с которого в данный момент этот сайт смотрится. Это часть стандарта CSS, которая позволяет применять стили на основе информации о разрешении устройства.
Здесь базовые стили для глупых браузеров. Например , для телефонов не high-end уровня. Pocket Internet Explorer для Windows Mobile 6.5 здесь же : ) .
@media only screen and (min-width: 480px)
Здесь стили более разумных , но все еще мобильных устройств. Android , iPhone и так далее.
@media only screen and (min-width: 768px)
Планшеты в режиме portrait.
@media only screen and (min-width: 992px)
Планшеты в режиме landscape , нетбуки , ноутбуки , десктоп.
@media only screen and (min-width: 1382px)
Десктоп с большими разрешениями , телевизоры.
Mobile first
Это техника, при которой сайт верстается сначала для устройств с меньшими возможностями, а затем с помощью media queries добавляются возможности и плюшки.
Так глупые браузеры без media queries получат самый простой контент (например, на мобильных телефонах). А более продвинутые поймут и отрисуют страницу, беря во внимание media queries.
Ссылки
2. Единственная хорошая книга на эту тему — «Responsive Web Design». Написана Ethan Marcotte, который в общем и положил начало адаптивным макетам. После ее прочтения многое прояснится.
Решение из будущего
У тега тоже существует одно чудесное свойство – object-fit . Кстати, оно работает и для видео-контейнеров.
Вот и все! object-fit управляет размещением элемента, если ширина и высота отличаются от его настоящего размера. Вместо cover можно использовать значение contain .
В чем подвох?
К сожалению, свойство не работает в IE и старых версиях Safari, но для них есть полифилл.
Быстрое решение
Легким движением руки изображение превращается. в элегантный фон!
Все мы хоть раз пользовались этим читерским приемом, правда?
Свойство background отлично работает, но помните, что использовать его следует только для изображений, не относящихся напрямую к контенту, и в некоторых особых случаях.
Продвинутое решение
К тому же самое производительное, если говорить о времени загрузки. Тяжелое изображение может существенно замедлить вашу веб-страницу, особенно на мобильных гаджетах.
В современных браузерах адрес изображения может изменяться в зависимости от ширины окна. Для этого существует атрибут srcset !
Его можно комбинировать с тегом HTML5 , который обеспечивает изящную деградацию до простого .
Уменьшение окна браузера — а контент?
Хэлло, вопросик возник. Видел сайты с резиновой версткой. Т.е. сжимаешь окно — естественно контент сжимается. Но до определенных размеров. Дальше контент не сужается, а кагбэ фиксированная ширина получается. Я этого достигал с помощью body , но на сайтах контент во всю ширину экрана. Как они ЭТО делают?
Используй " % " вместо " px "
Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой — использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера.
У каждого из этих решений есть свои плюсы и минусы, хочу заострить внимание на минусах, так как обычно именно между двух зол именно в отражении минусов этих решений приходится выбирать.
Фиксированная ширина макетной сетки
Вёрстку загоняют в горизонтальный габарит 960—980 пикселей (чтобы на большинстве устройств в большинстве разрешений всё входило), что при больших горизонтальных размерах окна выглядит как-то зябко — тонкая вертикальная полоса полезного содержимого страницы и огромные бесполезные поля неиспользуемого пространства по бокам.
«Резиновая» макетная сетка по ширине окна
Опять же при больших горизонтальных размерах окна есть другая проблема: строки текста становятся очень длинными, и читать их становится совсем не так комфортно, как хотелось бы.
Ещё одна распространённая проблема этого решения — боковые отступы при больших горизонтальных размерах окна уже не так удачно визуально согласуются с горизонтальными размерами элементов, что также не добавляет комфорта при взгляде на свёрстанный макет.
Хочу предложить нехитрый вариант решения — ограничить минимальный горизонтальный размер фиксированным значением в пикселях, а максимальный сделать относительным в процентном соотношении к ширине окна. Это очень банально решается простыми средствами ещё 2 версии спецификации CSS.
Update: Хочу оговориться, что речь не идёт о классическом эффекте резины и об адаптации под абсолютно все разрешения, скорее лишь про некий разумный диапазон разрешений, под который проектируется макет. В примерах ниже — это классический десктопный диапазон разрешений с горизонтальным габаритом разрешения от 1024 пикселей.
Ещё раз акцентирую внимание: в посте не идёт речь про решение для всех видов устройств и все диапазоны разрешений. В рамках одного макета эта задача не решаема в принципе, для её решения так или иначе потребуется несколько макетов. Мухи отдельно, котлеты отдельно.
Создаём контейнер макета:
Оформляем его незатейливым кодом стиля:
Однако этого решения кому-то может показаться мало в силу того что при очень больших горизонтальных размерах окна опять проявляются проблемы с длиной строк. Это решается настолько же простым дополнительным приёмом: создание дополнительного внешнего контейнера внутри уже описанного и ограничение его максимальной ширины фиксированным значением (мне субъективно кажется, что лучше всего подходят значния в диапазоне 1400—1600 пикселей). Опять же используем лишь средства CSS 2.0. Такое решение вместо предложенного в первом комментарии простого добавления ширины в процентах для исходного контейнера будет работать ещё и в IE, который вплоть до 9 версии не понимает одновременного указания значений.
И немного меняем CSS:
Как видите — решение предельно просто и достаточно универсально, может применяться для любых блочных элементов.
Нужно сделать, чтобы при уменьшении экрана размеры блоков уменьшались - это я сделал. Поставил width: 8.333%, max-width и min-width. А вот еще надо, чтобы при этом расстояния между этими блоками тоже уменьшались. При максимальной ширине чтобы было 12px между ними, а при минимальном 9px. Как это можно сделать ?
- Вопрос задан более трёх лет назад
- 1071 просмотр
Простой 3 комментария
Media-запросы в помощь. Либо делайте на относительных единицах, но с ними точного значения отступов не добиться.
SmthTo, а если сделать div'ы так сказать "промежуточные" между основными, пойдет ли так ? не будет ли каких проблем ? вот как-то так:
тут я сделал, чтобы эти промежуточные дивы имели резиновую ширину, и они тоже сужаются при уменьшении экрана.
Михаил, LOL, ну можно и так :))
Смотрите в сторону Grid тогда уже.
вот так написано в т.з.:
Необходимо сверстать промо-страницу по макету.
Сетка - резиновая, 12 колонок с расстояниями между ними, ширина - 90% от вьюпорта, максимум 1092px, минимум - 819px.
В максимальном состоянии ширина колонки - 80px, расстояние между колонками - 12px. В минимальном - 60px и 9px соответственно.
При ширине экрана менее 859px (мимимальная сетка + поля по 20px) продумать адаптивные стили, вплоть до ширины вьюпорта 320px.
Получится ли с помощью vw сделать чтобы margin был именно 12 пикселей и 9 пикселей ?
Михаил, да, только немного математики придется применить, чтобы размеры были резиновыми, но в пределах мин и макс значений. Поищите в гугле, я когда-то видел такую формулу.
Решение проблемы
Нам нужны два блочных элемента для достижения желаемого поведения. Нет изображений, нет Javascript.
Таким образом, наш блок уже выше ширины. Если вы хотите отображать только несколько цветных блоков, тогда уже все готово. Но поскольку пользовательский интерфейс намного сложнее, и если вы также предоставляете некоторый контент, мы добавляем контент в наш блок .box .
Читайте также: