20
голосов
Как сделать адаптивный svg?
Можно создать "адаптивное" svg-изображение. Для этого нужно прописать внутри него css-медиазапросы и двигать элементы через transform.
Пример изображения:
<svg xmlns="http://www.w3.org/2000/...
12
голосов
Как изменить картинку на сайте при определенном разрешении?
Медиа-запрос
Допустим, по дефолту имеем background-image:url("images/main.png");
И определяем медиа-запрос для девайсов с разрешением от 320 до 500 пикселей:
@media (min-width:320px) and (max-width:...
11
голосов
Принятый
Как сделать такие пятиугольники (+адаптивные) через css?
Решение SVG
Решение адаптивно. Работает во всех браузерах.
Вёрстка не сломается при изменении масштаба, так как все оформительские элементы: текст, патч, градиент находятся внутри SVG
Если будет ...
10
голосов
Принятый
Как правильно верстать макет, когда ширина экрана меньше ширины макета в пикселях?
1 - Уточните у заказчика, что он в курсе, что дизайнер сделал такой широкий макет. Предупредите, что без адаптивизации хорошо будет смотреться только на больших мониторах. Порой заказчики могут ...
10
голосов
Почему в разных браузерах сайты на одном и том же разрешении отображаются по-разному?
Давным-давно, в далёком-далёком прошлом десятилетии, когда мобильники были ещё слишком слабые и ничего толком не умели, все веб-сайты (не считая WAP, который отдельная история) делали только для ...
10
голосов
Как сверстать блок с линиями отходящими от центральной картинки?
Надеюсь работники офисов не будут на меня в обиде за беззлобную
шутку-картинку, демонстрирующую их тяжкий повседневный труд. Это скорее сочувствие.
Может быть вы улыбнетесь, глядя на эту картинку ...
9
голосов
Что такое Bootstrap?
Рекомендую учебный раздел на Webreference.ru. Там изложены базовые понятия Бутстрапа, а рядом — справочники по CSS и HTML.
Бутстрап — конструктор с набором ...
9
голосов
Принятый
В каких браузерах и на каких устройствах проверять адаптивный сайт?
Дисклеймер: я не фронт-энд разработчик, лишь сочувствующий; все выкладки - ИМХО, подкреплённое набитыми шишками.
Шаг первый, подготовительный.
Определите аудиторию сайта, её технические возможности, ...
9
голосов
Принятый
Как перевести клиенту "резиновая верстка" на англ.язык?
Виды верстки:
Статический (Static) - использует заданный размер страницы и не изменяется в зависимости от ширины браузера.
Жидкий, резиновый (Liquid, Fluid) - использует в CSS-стилях относительные ...
9
голосов
Принятый
Как сверстать блоки с треугольными закладками?
body,html {margin: 0;padding: 0;}
.blocks {
position: relative;
overflow: hidden;
counter-reset: albumList;
}
.block {
position: relative;
float: left;
display: inline-block;
...
8
голосов
Занять div`ом всю оставшуюся высоту. Как?
Для такой задачи подходит flex-box. Нужно разместить блоки в контейнере flex 100%-высоты, а в блок, который нужно растянуть, добавить правило flex-grow
.flex {
display: flex;
flex-...
8
голосов
Как сделать адаптивный svg?
Вариант на JS (подобно flex-wrap в CSS):
const $d = document;
let rects = $d.getElementsByTagName('rect');
const arrangement = e => {
let windowWidth = $d.documentElement.clientWidth;...
8
голосов
Как сверстать блок с линиями отходящими от центральной картинки?
Вот SVG вариант.
Я умышленно ставлю вьюбокс наполовину в отрицательную область (viewbox="-100 -100 200 200"), чтобы координата 0,0 была в центре картинки, так легче из головы брать точки для ...
8
голосов
Принятый
Пропорциональное изменение размеров дочернего элемента (полностью адаптивный квадрат) при изменении размеров родительского элемента
Вопрос: Как при изменении размеров родительского элемента,
пропорционально изменять размеры дочернего элемента? Дочерний элемент
должен быть полностью адаптивный квадрат, и при любых изменениях высоты ...
7
голосов
Принятый
Адаптивный поворот текста
Используем предназначенный для этих целей writing-mode: vertical-lr + transform: rotate(180deg). Центрировать надпись внутри будем при помощи флексбокса.
.block {
position: relative;
...
7
голосов
Как сделать такие пятиугольники (+адаптивные) через css?
А чтобы была адаптивной, ее надо внедрить как фоновую картинку.
Сохранить сей пример в отдельном файле name.svg
background-Image: url(путь к файлу name.svg);
background-size: cover;
И второй ...
7
голосов
Принятый
Как сверстать блок с линиями отходящими от центральной картинки?
Вариант с применением двух изображений
При этом решение используется pattern для добавления второго круглого изображения в центре.
Решение адаптивно, вёрстка не сломается при изменении размера окна ...
6
голосов
Принятый
При изменении размера экрана до 489px появляется белая полоса справа
Открываю в хроме панель отладки и начинаю удалять блоки со страницы. Когда прокрутка пропадает, перегружаю страницу и копаю вглубь блока.
Прокрутка исчезнет, если убрать вот эти строки в стилях:
...
6
голосов
Принятый
Геометрическая фигура (параллелограм) на CSS
Это делается с помощью skew:
* {
margin: 0;
padding: 0;
}
div {
margin: 20px;
padding: 0;
position: relative;
width: 75px;
height: 25px;
color: #ffffff;
}
p {
...
6
голосов
Принятый
На какие разрешения экранов делать медиазапросы?
Вот так выглядят примерно обычно мои запросы
/* Large desktops and laptops */
@media (min-width: 1200px) {
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) ...
6
голосов
Принятый
Responsive clip-path
К сожалению я не нашёл clip-path генераторов, которые позволяли бы рисовать кривыми линиями.
Есть генераторы, которые рисуют прямыми линиями по узловым точкам:
https://codepen.io/jh3y/pen/XqVQqa
...
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%);
...
5
голосов
Принятый
Как разместить в ряд три изображения в квадратных областях
Как вариант
div {
background: #737373;
float: left;
position: relative;
width: 30%;
padding-bottom: 30%;
margin: 1.66%;
}
div:hover {
background: ...
5
голосов
Принятый
Галерея с изображениями разными по ширине
Можно подключить плагин который автоматически будет выводить фото Например:
Демо 1, 2, 3, 4, 5 ...
Там сверху есть ссылка ( CollagePlus jQuery Plugin Example ) где можно скачать плагин.
Успехов.
5
голосов
Галерея с изображениями разными по ширине
Фиксированная высота, под которую подгоняется картинка, и выравнивание по двум краям с пустотами между картинками?
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
5
голосов
Принятый
Медиа-запросы не работают
Надо поставить media после обычных, чтобы они переопределяли стандартные правила:
#main {
width: 53%;
}
@media screen and (max-width: 1024px) {
#main {
width: 100%;
}
}
Можно было бы ...
5
голосов
Принятый
Как уместить картинку в ячейке, в мобильной версии?
table {
border-collapse: collapse;
}
input[type="image"] {
max-width: 100%;
}
<table>
<tr>
<td>
<input type="image" src="http://placehold.it/150x180" name=...
5
голосов
Принятый
Как сделать прелодер изображения, сохраняющий пропорции оригинального файла?
Решил задачу таким образом.
Можно на лету создавать изображения в формате SVG того-же размера.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 200" width="1500" height="200"/>
...
Only top scored, non community-wiki answers of a minimum length are eligible
Связанные метки
адаптивная-верстка × 590css × 409
html × 363
вёрстка × 276
javascript × 78
bootstrap × 74
css3 × 70
html5 × 43
jquery × 33
адаптивность × 30
flexbox × 28
media-queries × 20
svg × 14
веб-программирование × 13
responsive × 11
изображения × 10
frontend × 9
scss × 8
меню × 8
slick.js × 7
img × 7
wordpress × 6
bootstrap4 × 6
css-grid × 6
grid × 6