20 голосов

Как сделать адаптивный svg?

Можно создать "адаптивное" svg-изображение. Для этого нужно прописать внутри него css-медиазапросы и двигать элементы через transform. Пример изображения: <svg xmlns="http://www.w3.org/2000/...
zhurof's user avatar
  • 10.4k
12 голосов

Как изменить картинку на сайте при определенном разрешении?

Медиа-запрос Допустим, по дефолту имеем background-image:url("images/main.png"); И определяем медиа-запрос для девайсов с разрешением от 320 до 500 пикселей: @media (min-width:320px) and (max-width:...
Klimenko Kirill's user avatar
11 голосов
Принятый

Как сделать такие пятиугольники (+адаптивные) через css?

Решение SVG Решение адаптивно. Работает во всех браузерах. Вёрстка не сломается при изменении масштаба, так как все оформительские элементы: текст, патч, градиент находятся внутри SVG Если будет ...
Alexandr_TT's user avatar
10 голосов
Принятый

Как правильно верстать макет, когда ширина экрана меньше ширины макета в пикселях?

1 - Уточните у заказчика, что он в курсе, что дизайнер сделал такой широкий макет. Предупредите, что без адаптивизации хорошо будет смотреться только на больших мониторах. Порой заказчики могут ...
kizoso's user avatar
  • 9,303
10 голосов

Почему в разных браузерах сайты на одном и том же разрешении отображаются по-разному?

Давным-давно, в далёком-далёком прошлом десятилетии, когда мобильники были ещё слишком слабые и ничего толком не умели, все веб-сайты (не считая WAP, который отдельная история) делали только для ...
andreymal's user avatar
  • 12.7k
10 голосов

Как сверстать блок с линиями отходящими от центральной картинки?

Надеюсь работники офисов не будут на меня в обиде за беззлобную шутку-картинку, демонстрирующую их тяжкий повседневный труд. Это скорее сочувствие. Может быть вы улыбнетесь, глядя на эту картинку ...
Alexandr_TT's user avatar
9 голосов

Что такое Bootstrap?

Рекомендую учебный раздел на Webreference.ru. Там изложены базовые понятия Бутстрапа, а  рядом — справочники по CSS и HTML. Бутстрап — конструктор с набором ...
Gleb Kemarsky's user avatar
9 голосов
Принятый

В каких браузерах и на каких устройствах проверять адаптивный сайт?

Дисклеймер: я не фронт-энд разработчик, лишь сочувствующий; все выкладки - ИМХО, подкреплённое набитыми шишками. Шаг первый, подготовительный. Определите аудиторию сайта, её технические возможности, ...
Lyth's user avatar
  • 1,650
9 голосов
Принятый

Как перевести клиенту "резиновая верстка" на англ.язык?

Виды верстки: Статический (Static) - использует заданный размер страницы и не изменяется в зависимости от ширины браузера. Жидкий, резиновый (Liquid, Fluid) - использует в CSS-стилях относительные ...
DiDex's user avatar
  • 2,298
9 голосов
Принятый

Как сверстать блоки с треугольными закладками?

body,html {margin: 0;padding: 0;} .blocks { position: relative; overflow: hidden; counter-reset: albumList; } .block { position: relative; float: left; display: inline-block; ...
Sevastopol''s user avatar
8 голосов

Занять div`ом всю оставшуюся высоту. Как?

Для такой задачи подходит flex-box. Нужно разместить блоки в контейнере flex 100%-высоты, а в блок, который нужно растянуть, добавить правило flex-grow .flex { display: flex; flex-...
Crantisz's user avatar
  • 9,710
8 голосов

Как сделать адаптивный svg?

Вариант на JS (подобно flex-wrap в CSS): const $d = document; let rects = $d.getElementsByTagName('rect'); const arrangement = e => { let windowWidth = $d.documentElement.clientWidth;...
Arthur's user avatar
  • 4,572
8 голосов

Как сверстать блок с линиями отходящими от центральной картинки?

Вот SVG вариант. Я умышленно ставлю вьюбокс наполовину в отрицательную область (viewbox="-100 -100 200 200"), чтобы координата 0,0 была в центре картинки, так легче из головы брать точки для ...
Stranger in the Q's user avatar
8 голосов
Принятый

Пропорциональное изменение размеров дочернего элемента (полностью адаптивный квадрат) при изменении размеров родительского элемента

Вопрос: Как при изменении размеров родительского элемента, пропорционально изменять размеры дочернего элемента? Дочерний элемент должен быть полностью адаптивный квадрат, и при любых изменениях высоты ...
Alexandr_TT's user avatar
7 голосов
Принятый

Адаптивный поворот текста

Используем предназначенный для этих целей writing-mode: vertical-lr + transform: rotate(180deg). Центрировать надпись внутри будем при помощи флексбокса. .block { position: relative; ...
Sasha Omelchenko's user avatar
7 голосов

Как сделать такие пятиугольники (+адаптивные) через css?

А чтобы была адаптивной, ее надо внедрить как фоновую картинку. Сохранить сей пример в отдельном файле name.svg background-Image: url(путь к файлу name.svg); background-size: cover; И второй ...
Air's user avatar
  • 14.5k
7 голосов
Принятый

Как сверстать блок с линиями отходящими от центральной картинки?

Вариант с применением двух изображений При этом решение используется pattern для добавления второго круглого изображения в центре. Решение адаптивно, вёрстка не сломается при изменении размера окна ...
Alexandr_TT's user avatar
6 голосов
Принятый

При изменении размера экрана до 489px появляется белая полоса справа

Открываю в хроме панель отладки и начинаю удалять блоки со страницы. Когда прокрутка пропадает, перегружаю страницу и копаю вглубь блока. Прокрутка исчезнет, если убрать вот эти строки в стилях: ...
Gleb Kemarsky's user avatar
6 голосов
Принятый

Геометрическая фигура (параллелограм) на CSS

Это делается с помощью skew: * { margin: 0; padding: 0; } div { margin: 20px; padding: 0; position: relative; width: 75px; height: 25px; color: #ffffff; } p { ...
Arthur's user avatar
  • 4,572
6 голосов
Принятый

На какие разрешения экранов делать медиазапросы?

Вот так выглядят примерно обычно мои запросы /* Large desktops and laptops */ @media (min-width: 1200px) { } /* Landscape tablets and medium desktops */ @media (min-width: 992px) ...
Павел Игоревич's user avatar
6 голосов
Принятый

Responsive clip-path

К сожалению я не нашёл clip-path генераторов, которые позволяли бы рисовать кривыми линиями. Есть генераторы, которые рисуют прямыми линиями по узловым точкам: https://codepen.io/jh3y/pen/XqVQqa ...
Alexandr_TT's user avatar
6 голосов
Принятый

Разделить страницу двумя цветами по диагонали

body { background-color: #000; } body::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 100vh; clip-path: polygon(100% 0, 0% 100%, 100% 100%); ...
Deonis's user avatar
  • 33.8k
5 голосов
Принятый

Как разместить в ряд три изображения в квадратных областях

Как вариант div { background: #737373; float: left; position: relative; width: 30%; padding-bottom: 30%; margin: 1.66%; } div:hover { background: ...
soledar10's user avatar
  • 27.4k
5 голосов
Принятый

Галерея с изображениями разными по ширине

Можно подключить плагин который автоматически будет выводить фото Например: Демо 1, 2, 3, 4, 5 ... Там сверху есть ссылка ( CollagePlus jQuery Plugin Example ) где можно скачать плагин. Успехов.
user185447's user avatar
  • 1,695
5 голосов

Галерея с изображениями разными по ширине

Фиксированная высота, под которую подгоняется картинка, и выравнивание по двум краям с пустотами между картинками? display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;
Qwertiy's user avatar
  • 121k
5 голосов
Принятый

Медиа-запросы не работают

Надо поставить media после обычных, чтобы они переопределяли стандартные правила: #main { width: 53%; } @media screen and (max-width: 1024px) { #main { width: 100%; } } Можно было бы ...
Qwertiy's user avatar
  • 121k
5 голосов
Принятый

Как уместить картинку в ячейке, в мобильной версии?

table { border-collapse: collapse; } input[type="image"] { max-width: 100%; } <table> <tr> <td> <input type="image" src="http://placehold.it/150x180" name=...
soledar10's user avatar
  • 27.4k
5 голосов
Принятый

Как сделать прелодер изображения, сохраняющий пропорции оригинального файла?

Решил задачу таким образом. Можно на лету создавать изображения в формате SVG того-же размера. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 200" width="1500" height="200"/> ...
Crantisz's user avatar
  • 9,710

Only top scored, non community-wiki answers of a minimum length are eligible