Наиболее часто используемым решением h5 для мобильных терминалов в последние годы является решение rem. Для достижения отзывчивости требуется вычислить размер шрифта корневого элемента.
Но у этого решения есть и недостаток: когда размер шрифта не является целым числом, некоторые шрифты используют единицы измерения rem, что вызывает проблемы с размером отображения шрифта. Это по-прежнему является головной болью для фронтенд-разработки проектов. с высокими требованиями к визуальной реставрации.
Решение проблемы отзывчивости внешнего интерфейса — это не что иное, как возможность нормального отображения на разных устройствах. Здесь мы представляем адаптивное решение, не требующее метода rem. Используйте px напрямую. Здесь мы говорим о черновике дизайна, основанном на 750 пикселях. Сколько пикселей вы отмеряли в эскизе дизайна в стиле?
Прямо напишите сколько пикселей. Разве это не очень быстро и не требует рем-конвертации?
Здесь мы фактически используем масштаб преобразования для масштабирования размера страницы и достижения отзывчивости.
Основной код:
let screenMatch = () => { document.body.style.setProperty('visibility', 'hidden') let page = document.getElementById(page); let _scale = window.outerWidth/750; page.style.setProperty(transformOrigin); , 0 0); page.style.setProperty(transform, Scale(+ _scale +)); //Совместимо с ios8 page.style.setProperty(-webkit-transform-origin, 0 0); page.style.setProperty(-webkit-transfrom, Scale(+ _scale + )); setTimeout(() => { page.style.setProperty(transformOrigin) , 0 0); page.style.setProperty(transform, Scale(+ _scale +)); //Совместимо с ios8 page.style.setProperty(-webkit-transform-origin, 0 0); page.style.setProperty(-webkit-transfrom, Scale(+ _scale + )); ') }, 100); } screenMatch(); window.onresize = screenMatch;В приведенном выше коде узел с идентификатором страницы является начальным узлом всего элемента страницы и первым элементом под телом. Здесь body/html необходимо установить min-height:100%;height:100%;
Фактически, мы также можем использовать единицы пикселей в мини-программах, но при использовании преобразования в мини-программах будут возникать некоторые ошибки с неровными шрифтами. Наконец, мы просто изменили атрибут масштабирования и использовали -webkit-zoom для совместимости. Код ядра мало чем отличается от h5. То же самое и с размером масштабирования.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.