Адаптивная верстка — как лучше верстать — писать элементы и для телефона, и для компа и выставлять display? Или манипулировать DOM'ом через JS?
Что лучше - делать элементы и для телефона, и для компа и на нужной ширине нужному элементу выставлять нужный display. Или стараться делать всего один элемент, а потом при изменении ширины экрана манипулировать его DOM'ом через Javascript?
Первый подход явно легче и удобнее. И не надо возиться с JS. Но тогда на сайте есть много ненужных DOM элементов с display: none.
Я понимаю, что все зависит от задач. Иногда на JS написать не так сложно (например, поменять src у логотипа сайта на мобилках). Но стоит ли пытаться сделать одним элементом (меняя его через JS на разных экранах) не такие простые вещи? Насколько плохо то, что в DOM'e есть много элементов (для мобилок, например), которые не будут показываться для пользователей ПК?
Я знаю про медиа запросы. Но иногда их не хватает. Меню на телефоне и на компе достаточно разные, например. Как поступить - отдельно верстать 2 меню? Или через JS менять меню для компа под телефон?
мобайл-ферст = из мобильного делаем десктоп
и наоборот
Я выбрал этот путь, вот только делать это можно разными способами. Можно верстать элементы для мобилок / компов и показывать / прятать их на нужной ширине экрана. А можно сверстать один элемент и менять его через JS в зависимости от ширины экрана.
Иногда требуется поменять тег - со span на a. И добавить href. Иногда убрать обертку. Или наоборот - добавить. И тд. Это можно через JS делать. А можно просто сверстать заранее. И скрыть, когда не нужно. А потом показать, когда нужно.
sim3x, а еще вопрос. Вот у меня есть логотип для сайта для ПК и для мобилок. У них разные картинки. Если я напишу 2 тега img и буду показывать и скрывать их в зависимости от ширины экрана, будет ли загружаться картинка для ПК, когда я на телефоне? То есть, картинка (тег img), у которого display: none. На телефоне то логотип от ПК не нужен.
Если будет загружаться, то лучше писать не два тега img и скрывать / показывать их. А менять src через JS ?
Я знаю про медиа запросы. Но иногда их не хватает. Меню на телефоне и на компе достаточно разные, например. Как поступить - отдельно верстать 2 меню? Или через JS менять меню для компа под телефон?
sorry_i_noob, в любом случае Вы верстаете 2 разных представления меню.
Далее - делится на 2 разных типа:
1. Вы делаете разные меню с одинаковой и постоянной разметкой через манипуляцию с помощью CSS-классов и медиа-запросов.
2. Вы создаёте абсолютно другую разметку меню в отдельном слое (для каждого из разрешений экрана) и показываете нужную в зависимости от текущего разрешения, а остальные - скрываете.
Второй вариант: используется крайне редко, т.к. это должно быть что-то экзотическое и с колоссальной разницей, чтобы так делать.
Например, радиальное и анимированное на канвасе и обычное текстовое с разделяемыми пунктами меню.
JS - в принципе не рекомендуется никогда применять при настройке отображения контента, т.к. это сильно влияет на скорость загрузки страницы и потребление аккумуляторов на мобильных устройствах.
Для этого - и были созданы CSS стили.
2. Я за то, что бы верстать одно единственное меню и модифицировать его с помощью media query запросов для всех необходимых разрешений, типов устройств и ориентаций экрана.
Т.е. делать именно так, как это было задумано разработчиком технологии.
xmoonlight, а еще вопрос. Вот у меня есть логотип для сайта для ПК и для мобилок. У них разные картинки. Если я напишу 2 тега img и буду показывать и скрывать их в зависимости от ширины экрана, будет ли загружаться картинка для ПК, когда я на телефоне? То есть, картинка (тег img), у которого display: none. На телефоне то логотип от ПК не нужен.
Если будет загружаться, то лучше писать не два тега img и скрывать / показывать их. А менять src через JS ?
Средний
