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

Question

[stariydead]

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

Comments

[Антон Литвиненко]

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

[stariydead]

Антон Литвиненко, есть ли какой-нибудь способ упростить (ускорить) этот процесс?

[ThunderCat]

stariydead, Писать быстрее?

[Модератор]

Склоку следует прекратить.

Answer 1

[Сергей delphinpro]

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

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

Comments

[stariydead]

Окей, в целом, теперь ясно

[Северное Сияние]

а почему пиксели в адаптивной верстке плохо и с чего начать изменение макета под десктоп? какие величины для шрифтов ставить?

[d'Ivan]

Сергей delphinpro
А можно ли каким-либо образом просканировать CSS на предмет пиксельных значений и заменить всех их на rem? Может, для этих целей есть какая-то автоматизация, инструменты.

[WapSter]

Верстка в пикселях не говно, если уметь ее применять. Говно оно будет если явно указывать к примеру width 1030px или что-то подобное.

[WapSter]

Román Mirilaczvili, rem теже пиксели, и очень часто верстка может ехать если пихать их где нужно и не нужно

[Сергей delphinpro]

Северное Сияние, WapSter, я уже писал довольно подробно, почему верстать пикселями не нужно.
вкратце – пиксельная верстка не реагирует на настройку шрифта в браузере. Страдает доступность. я, как человек с плохим зрением очень хорошо это ощущаю.

[Сергей delphinpro]

Román Mirilaczvili,

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

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

[Сергей delphinpro]

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

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

[IIIu6ko]

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

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

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

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

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

[Сергей delphinpro]

IIIu6ko,

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

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

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

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

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

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

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

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

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

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

[IIIu6ko]

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

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

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

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

с учётом

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

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

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

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

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

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

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

[Сергей delphinpro]

IIIu6ko,

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

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

[Сергей delphinpro]

PS.

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

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

[IIIu6ko]

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

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

Answer 2

[Preiwer]

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

Comments

[Вова Дружаев]

как поймут в сети: было 600px значит поменяю и будет 600%

[Preiwer]

Владимир Дружаев,
Правила конвертирования:
1 px равен 0,75 pt;
1 em равен 16px;
1 em равен 100%

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