Подскажите, дизайнер нарисовал макет сайта для мобильных устройств (320x568). Мне

Question

Подскажите, дизайнер нарисовал макет сайта для мобильных устройств (320x568). Мне

надо сделать так, что бы на всех мобильных устройствах все было одинаково, текст не переносился, отступы выглядели пропорционально и т.п. Для этого я на калькуляторе перевожу пиксели в vh (за 100vh беру 568px, это высота одного экрана в макете). И все работает прекрасно, пока высота не становится на много больше чем 568px, а это например iphone X, где высота 812px. Там все становится очень большим. У меня есть два решения этой проблемы, помогите мне определить что из этого оптимальней:
1) В SCSS написать функцию, которая будет сама переводить px в vh. На вход она принимает высоту экрана в пикселях и значение в пикселях, которое надо преобразовать в vh.
Сделать вёрстку под высоту 568, а потом продублировать ее для других высот. В итоге у нас будет куча css для разных экранов.

2) Создать css переменную, в которую через js я буду записывать высоту текущего экрана. И через функцию calc() в css высчитывать значения для каждого отступа и размера шрифта.
В итоге мы получаем мало css, но много вычислений, которых может быть более сотни. И это, в теории, может сильно тормозить мобильные устройств.

Вот что лучше выбрать?

#frontend #html #javascript #programming #russian

0

09.03.2020