Ответы пользователя по тегу Адаптивный дизайн
  • Не работает @media запрос, в чем проблема?

    Ankhena
    @Ankhena
    Нежно люблю верстку
    <meta name="viewport" content="width=device-width, initial-scale=1">

    забыли
    Ответ написан
  • Почему для разных экранов шрифт em - разный?

    Ankhena
    @Ankhena
    Нежно люблю верстку
    Давайте разбираться.
    em - это размер шрифта родительского элемента.
    У большинства браузеров шрифт по умолчанию 16px.
    Предположим, что для контентного блока задан шрифт 1em и больше никаких правил для шрифта для родительских элементов не было и в браузере не установлен увеличенный или уменьшенный шрифт. Значит, размер шрифта будет 16px.
    Мониторы бывают разного размера и с разным разрешением. Например, 13" ноут может быть с разрешением и 1920 и 1280 (не ограничиваясь этими размерами).
    Соответственно, 16px будут выглядеть по разному на одном и том же мониторе при смене разрешения.

    Вы можете задать размер шрифта (и не только шрифта) в vw. Но на мелких экранах ждет сюрприз: шрифт окажется очень мелким, возможно, даже и вовсе нечитаемым, хоть и будет соответствовать вашему требованию.
    Ответ написан
  • Как лучше сверстать этот блок?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Один родитель, 3 ребенка.
    У ребенка внутри картинка и текст.
    C помощью nth-child и order менять расположение картинки.
    Ответ написан
  • Какие размеры у вас стоят в медиа запросах?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Если макет один, только для десктопа, то в точках слома.
    Если 3, то когда как. Если проект бюджетный, то как макеты нарисованы, такие и точки. Если не бюджетный, то снова в точках слома.
    Ответ написан
  • Как расположить списки друг под другом с CSS grid, где каждый элемент списка — ячейка сетки?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Флексами: https://jsfiddle.net/srv97kh5/

    Заголовок я бы вынесла из блока, но надо смотреть по макету.
    Ответ написан
  • Как сверстать такой элемент, если блоков не 4 а больше?

    Ankhena
    @Ankhena Куратор тега Вёрстка
    Нежно люблю верстку
    Без всяких дополнительных блоков так: https://jsfiddle.net/k8q7sbxd/
    С перестроением под мелкие экраны, например, так: https://jsfiddle.net/k763w48g/
    (У меня просто полоски, фигурные нарисуете сами SVG'шками)

    У всего блока псевдоэлементами: верхняя вертикальная черта с шляпкой и горизонтальная.
    У каждого элемента псевдоэлементом вертикальная черта с кружком.

    При адаптиве выстраивать все это в столбик. Черточки поворачиваются на 90°
    Ответ написан
  • Высота блока при адаптиве?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    И вообще надо ли задавать фиксированную высоту блокам?

    Зависит от макета и задумки дизайнера.
    В большинстве случаев желательно обходится без указания высоты или задавая минимальную/максимальную.

    Но как решить данную проблему?

    Если header должен быть именно 100vh, то и размер шрифта пересчитать в единицы измерения связанные с вьюпортом. (Только обязательно проверяйте на больших и маленьких размерах окна, обычно там нужно менять размеры через media, чтобы не получить гигантов и мини-карликов)
    Ответ написан
  • Какие должны быть размеры в дизайне?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Не оттуда пляшете.

    Давайте я вам как девочка девочке всё объясню. На примере джинсов.
    Есть такая штука мода. Сейчас в обтяжку, раньше клеш или широченные. Но при этом всегда остаются люди предпочитающие классику или консерваторы, которые предпочитают даже слегка устаревшую классику.

    Так вот, с сайтами аналогичная история.
    10 лет назад считалось, что шрифт 14px это гигантомания и использовали 10 или 12. Между строчками крошечные отступы. Особо нерадивые даже между абзацами пытались не делать пустых строк.

    Есть мода и восприятие пользователем современных сайтов. То, как хочется видеть именно сейчас. Изменяются даже пропорции и зависимости.
    96 это точно такое же красивое число как 100. Это 16*6. А 16 это стандартный размер шрифта основных браузеров.

    Кроме этого есть аспекты адаптивности.
    И правильно не ширина кнопки равна 100 или 96px, а ширина кнопки это ширина текста плюс отступы. И хорошо бы, чтобы эти отступы были пропорциональны размеру шрифта, а не кратны 5px. Вы поставите отступ четко 20px, а пользователь поставит в настройках браузера шрифт 150%. И получится куцая кнопка с некрасивыми маленькими отступами.
    При этом не все элементы должны быть кратны размеру шрифта, какие-то имеют другие зависимости.

    Другой вариант, пропорции относительно размеров экрана или блока. Например, кнопка должна занимать всю ширину блока или половину. Если текст не помещается, то переносится.

    Поэтому, хороший дизайнер либо сопровождает работу верстальщика, либо пишет сопроводительное письмо с указанием зависимостей, либо и то и другое.

    И да, дизайнер может четко сказать, что справа отступ 19px, а слева 17, потому что визуально (например, из-за особенностей шрифта) получается ровно. Если это проблема для верстальщика, то не надо работать с таким верстальщиком.
    Верно и в обратную сторону, если дизайнер нагородил какую-то невменяемую конструкцию из-за которой прибавляется лишняя 1000 строчек кода, то имеет смысл обсудить целесообразность ее использования с самим дизайнером и заказчиком.

    Про вклад заказчиков в дизайн, я думаю, вы и сами знаете. У них особенное чувство прекрасного, хорошо, если просто консерватор из первого абзаца.
    Ответ написан
  • Как выровнять блоки c новой строки с помощью flexbox?

    Ankhena
    @Ankhena
    Нежно люблю верстку
    Решается добавлением пустых блоков в количестве "максимальное количество блоков в строке минус один". Не забудьте у них обнулить высоту, границы, тени и т.д.
    https://jsfiddle.net/0c8hb7ka/

    (это если надо флексами)
    Ответ написан
  • Как доделать блок div с border и заголовком?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Держите https://jsfiddle.net/Lwhjdkvc/
    Просто паддинги были лишними или не к тому месту.

    (А семантику старайтесь не нарушать по мере возможностей)
    Ответ написан
  • Как добавить адаптивность форме?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Даже если криворукость дизайнера печалит, но заказ уже взят, деваться некуда, надо делать.
    И справедливости ради, не всегда именно дизайнер виноват в том, что макет выглядит именно так. Заказчики часто тоже отжигают.

    Как вообще адаптировать такие элементы?

    Вариантов несколько, номера не по приоритету.
    1. Когда дизайнеры рисуют что-то затейливое, у них также бывает и мнение и о том, как это затейливое должно выглядеть на разных экранах. Т.е. спросить дизайнера.
    2. Фон простой в смысле цветов и вы его уже сделали картинкой. Картинку масштабировать пропорционально, для шрифта и полей указывать размеры в vw. Для ретины выдавать свою картинку через media.
    3. Аналогично п.2., но фон переделать в SVG.
    4. На мелких экранах упрощать графику. Например, фон поделить пополам под наклоном, реализовать с помощью linear-gradient. Скосы у полей на средних размерах оставить (делать трансформом или градиентом), на совсем мелких убрать. Слова логин/пароль задавать как placeholder.

    Если еще захотеть чтобы при фокусе обводка была не прямоугольником по инпуту, а на все скошенное поле, то будет вообще красота. Но пока решения как это реализовать в голову приходят только убогие. Либо двойной трансформ либо с участием JS либо несемантичные.

    p.s. присоедИниться
    Ответ написан
  • Как сверстать данный список/таблицу?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Как сверстать данный список/таблицу из иконок и подписей под ними.

    <figure>Используется для группирования любых элементов, например, изображений и подписей к ним. не должен быть связан непосредственно с основным содержимым документа и при его перемещении в другое место смысл текста не должен меняться. Обычно применяется для иллюстраций, фрагментов кода, схем, графиков, диаграмм и др.
    Для подписей используется тег
    <figcaption>
    https://webref.ru/html/figure
    https://webref.ru/html/figcaption

    Делаете блоки нужной ширины и выравниваете в них содержимое по центру.
    Используете flex.

    Мне нужно что бы результат был как на макете.

    Выкладывайте ваш код в песочницу (картинки можете заменить на заглушки нужного размера), показывайте что конкретно не получается.
    Ответ написан
  • Возможен ли pixelperfext + резиновая вёрстка?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    pixelperfect как понял только для px

    С чего бы это?
    Есть макет, для абстрактности на ширину 600 точек, в нем 2 колонки, в ТЗ указано, что блоки занимают по 50%. Ставите эти 50%. На ширине 600 получаете свои 300 необходимые для pixelperfect.

    Pixelperfect проверяется на тех размерах, для которых есть макеты.
    Ответ написан
  • Размер и разметка Landing pages, какую использовать?

    Ankhena
    @Ankhena
    Нежно люблю верстку
    какую нужно использовать ширину

    Любой сайт на любой ширине экрана должен выглядеть вменяемо.
    Статистику можно узнать набрав в поисковике что-то вроде "статистика разрешений экранов". Например, www.liveinternet.ru/stat/ru/resolutions.html

    И какую разметку

    Это вообще не поняла что вы имели в виду.
    Ответ написан
  • Какие выбрать breakpoints для нестандартного размера макета?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Не видя макет сложно сказать какие.

    В общем случае все очень просто и узнается экспериментально: двигаете размер окна и смотрите в каких точках ломается верстка, их и используете. Причем для разных блоков это могут быть разные точки.
    Ответ написан
  • Как адаптивно сверстать блок с картинкой и текстом, которые ведут себя нестандартно?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Первый блок вроде и так должен быть понятен.

    Второй как-то так: https://jsfiddle.net/s0zvgz4s/
    На JS определять высоту текста и картинки и задавать соответствующие классы для двух вариантов отображения.
    Ответ написан
  • Как определиться с числом и шириной макетов?

    Ankhena
    @Ankhena
    Нежно люблю верстку
    Количество макетов зависит от того, что вы нарисуете в блоках и когда (на какой ширине) будете перестраивать их.
    Обычно хватает 2х или 3х макетов. Можно и 1.
    Кроме самого макета можно приложить текстовый файл с комментариями, если поведение не очевидно в переходных местах.

    При этом Вы сами должны хорошо понимать как макет будет смотреться на огромных мониторах и на малюсеньких смартфонах и во всех промежуточных состояниях.
    В некоторых случаях можно не перестраивать блоки, а только варьировать размер шрифта или отступов.

    скорее всего это не устроит заказчика, ширину контейнера увеличить, как я понимаю, не могу.

    Можете.
    Заказчики бывают разные.

    Размеры сетки бутстрапа вполне очень распространены и жизнеспособны.

    Но на бутстрапе свет клином не сошелся и на сетке тоже.

    Как сайт сверстаный из макета шириной 1300px будет смотреться на мониторах с высоким разрешением?

    Самое разумное на мой взгляд - ходить по гостям и смотреть выбранные сайты на разных устройствах.
    Потом аналогично поступать с сайтами сверстанными по вашим макетам.
    Есть вариант проще - эмулятор в хроме, но я бы голосовала за реальные устройства.
    Ответ написан
  • Стоп кран от дизайнера, красиво, но нужно адаптивно?

    Ankhena
    @Ankhena Куратор тега Вёрстка
    Нежно люблю верстку
    С толщиной линий надо еще как-то получше развлечься https://jsfiddle.net/o3yuuuff/
    Ответ написан
  • Как сделать, чтобы текст не съезжал при перемещении блока?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    2. Обернуть видео в контейнер
    .video-wrap {
      position: relative;
      padding-bottom: 56.25%;
      /* 56.25% задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
      padding-top: 30px;
      height: 0;
      overflow: hidden;
    }
    .video-wrap iframe,
    .video-wrap embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      max-width: 800px;
    }


    1. и 3. Выложите код в песочницу, уж не первый вопрос тут задаете.
    Ответ написан
  • Как сделать четким изображение при его масштабировании?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Использовать тег <picture> или media условия или SVG
    https://webref.ru/html/picture
    Ответ написан