Можно ли сделать интерфейс адаптивным, не переписывая весь CSS через media query's?

Столкнулся с проблемой. У интерфейса приложения есть полностью готовая desktop-версия. Необходимым стало создание мобильной версии, но нет желания полностью переписывать весь CSS код, т.к львиная доля всех значений написана через px, а значит статична. Есть ли способ не переписывать все под мобильные устройства отдельно?

Дополнительно:

не совсем понятен вопрос. довольно часто так и делают, сначала верстают десктоп версию, потом пишут всю адаптивку. даже если нет желания. но такая у нас работа

Ответы:

Обычно нет других вариантов. Если верстка гавно (в эту категорию входит верстка с использованием пикселей), то придется все переопределять в медиазапросах.

Но даже если размеры задаются в rem, то не всегда достаточно прописать только font-size для :root. Всё же приходится кое-что переопределять, хотя и значительно меньше.

• Окей, в целом, теперь ясно
• а почему пиксели в адаптивной верстке плохо и с чего начать изменение макета под десктоп? какие величины для шрифтов ставить?
• Сергей delphinpro
  А можно ли каким-либо образом просканировать CSS на предмет пиксельных значений и заменить всех их на rem? Может, для этих целей есть какая-то автоматизация, инструменты.
• Верстка в пикселях не говно, если уметь ее применять. Говно оно будет если явно указывать к примеру width 1030px или что-то подобное.
• Román Mirilaczvili, rem теже пиксели, и очень часто верстка может ехать если пихать их где нужно и не нужно
• Северное Сияние, WapSter, я уже писал довольно подробно, почему верстать пикселями не нужно.
  вкратце – пиксельная верстка не реагирует на настройку шрифта в браузере. Страдает доступность. я, как человек с плохим зрением очень хорошо это ощущаю.
• Román Mirilaczvili,
  

  А можно ли каким-либо образом просканировать CSS на предмет пиксельных значений и заменить всех их на rem?

  Да ну, не надо так делать. может оно и прокатит, а может и испортит всё. Верстка - это организм, все части должны быть согласованы между собой. То есть нужно не просто поменять значения, а отладить и перепроверить всё, по сути переверстать.

• часто верстка может ехать если пихать их где нужно и не нужно

  ну это само собой. в крайности тоже не нужно кидаться. Где-то и пиксели нужны, где-то и другие единицы измерения. Но в целом верстку лучше основывать на ремах.

• Сергей delphinpro, Кинь ссылку на пост, что ты писал по поводу rem, а то не найдёшь.

  Когда-то пробовал использовать rem, не понял смысла, показалось что лишние заморочки.
  Тогда ещё работал на фрилансе, там нет возможности попросить что-то у дизайнера, а даже если есть, то дизайн уже чаще всего готов. Без дизайна, который делался с учётом rem'ов - rem'ы бесполезны, имхо. Всё равно придётся писать медиа-запросы, только плюс ко всему высчитывать каждый раз сколько это rem, а даже если не высчитывать, то писать миксин, что по сути одно и тоже - лишние телодвижения.

  Вот мне интересно, что такого супер полезного в rem ты нашёл, что теперь любая вёрстка на px для тебя гавно. Байка про доступность - очень странная причина.

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

  Если это комплексный подход, когда вы вместе с дизайнером сели, всё проработали и т.д., то другое дело.
  Но если только из-за того, что тебе лень колёсиком крутануть - абсурд.

• IIIu6ko,
  

  Без дизайна, который делался с учётом rem'ов - rem'ы бесполезны, имхо.

  Это неверно. Любой дизайн рисуется в пикселях. Будь то фотошоп, или фигма.

  Байка про доступность - очень странная причина.

  Процитирую самого себя: я, как человек с плохим зрением очень хорошо это ощущаю.
  Действительно - странная причина. Всё дело в моих глазах...

  Людям с слабым зрением я думаю проще крутануть колёсико и увеличить масштаб на конкретном сайте

  Вы очень невнимательны. Мне проще было бы один раз выставить в настройках браузера размер шрифта, чем крутить колесико на каждом сайте.

  что такого супер полезного в rem ты нашёл

  я писал выше, нет смысла повторять.

  Если это комплексный подход, когда вы вместе с дизайнером сели, всё проработали и т.д

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

• Сергей delphinpro,
  Единственное что ты писал выше в пользу rem
  
  

  пиксельная верстка не реагирует на настройку шрифта в браузере

  Это только ради этого ты предлагаешь px заменить на rem?

  Это неверно. Любой дизайн рисуется в пикселях. Будь то фотошоп, или фигма.

  с учётом

  Дизайнер здесь с какого бока? Вы совершенно не понимаете зачем нужны разные единицы измерения.

  В смысле зачем? А какой смысл использовать rem, если в дизайне не используется этот подход?
  Всё преимущество rem в том, что есть одно значение, которое можно менять и это значение будет меняться везде, где используется rem.
  Но, если дизайнер этого не предусмотрел, то при адаптиве мы изменим базовое значение rem и полезем дальше писать медиа-запросы как и раньше т.к. у дизайнера один заголовок уменьшился на телефоне в 2 раза, а второй вообще не уменьшился или уменьшил в 3 раза и т.д. со всеми элементами.

  Вы очень невнимательны. Мне проще было бы один раз выставить в настройках браузера размер шрифта, чем крутить колесико на каждом сайте.

  А что это мы из контекста выдираем удобные вам строчки? Закончились какие-то адекватные аргументы или что? Или вы настолько невнимательный, что не можете дочитать предложение до конца?
  чем верстальщику работать на ремах.

  а потом рассуждайте о трудозатратах

  Увеличить масштаб страницы VS написать полностью сайт на rem.
  Трудозатраты очевидный. Игра не стоит свеч, чтобы за это так топить.

  Я не собираюсь никого переубеждать, мне изначально было просто интересно чисто для себя, для общего развития, чем так хорош REM. Может всё-таки о этом поговорим?
  Если какие-то плюсы, помимо того единственного или только для этого?

• IIIu6ko,
  

  написать полностью сайт на rem.
  Трудозатраты очевидный.

  Какие нафиг трудозатраты? Точно так же все и пишется. Лишних затрат ноль целых, хрен десятых.
  В общем понятно. У вас явно низкая квалификация. Спорить не о чем.

• PS.
  

  мне изначально было просто интересно чисто для себя, для общего развития, чем так хорош REM.

  Я готовлю статью на Хабр по этой теме. Там будут все подробности.

• Сергей delphinpro, Точно также, только везде нужно миксин писать, да?) Гений.
  В общем, вывод я сделал. Рем используешь чтобы колёсиком лишний раз не крутить, понятно.
  Из-за этого хотите наказывать тех, кто использует px? Радикал однако.

  Просто первый раз вижу чтобы человек так высказывал по поводу px. Стало интересно чем это мотивировано, в итоге узнал что у меня плохая квалификация.

вместо px ставь % и использую гриды или флексы. Я использую такой подходт 🙂

• как поймут в сети: было 600px значит поменяю и будет 600%
• Владимир Дружаев,
  Правила конвертирования:
  1 px равен 0,75 pt;
  1 em равен 16px;
  1 em равен 100%

  вот и всё а твой 600px будет 37.5em тогда 3750%