Недавно я разобрал свои заметки из предыдущих исследований интерфейса и обнаружил, что не совсем понимаю аспект экранной адаптации (rem) мобильного Интернета, я просто знаю, как его использовать.
Затем запишите некоторые свои мысли об адаптации экрана для мобильных устройств (rem).
введение в ремrem представляет размер шрифта корневого элемента (<html>). То есть, если размер шрифта корневого элемента равен 14 пикселей, то 1rem = 14 пикселей.
rem адаптируется к мобильному Интернету Эффект адаптацииНа экранах разных размеров размер одного и того же элемента не кажется одинаковым, но доля занимаемой ими ширины экрана одинакова.
код
// В теге head HTML-файла <script type=text/javascript> (function(){ var html = document.documentElement; // Получаем ширину экрана (пиксели) var hWidth = html.getBoundingClientRect().width; // Установите размер шрифта тега html равным hWidth/15 html.style.fontSize = hWidth/15 + 'px'; })()</script> // В less/* определяем переменную @r: 750/15 */@r:50rem; div { width: 100/@r; height: 200/@r;} JavaScript-кодСначала мы копируем 1/15 размера экрана (пикселей) в атрибут font-size тега html. На этом этапе 1/15 пикселя размера экрана (px) равняется размеру 1rem на экране любого размера. То есть: при любом размере экрана, если для элемента установлено одно и то же значение rem, элемент будет занимать одинаковую долю ширины экрана на всех размерах экрана, и эта пропорция будет одинаковой, и он будет адаптироваться к все размеры экрана.
меньше кодаТеперь вам нужно всего лишь преобразовать единицу измерения px элемента в черновом проекте в единицу измерения rem.
Поэтому на данный момент мы можем рассматривать проект дизайна как экран мобильного телефона определенного размера.
В моем примере ширина черновика дизайна составляет 750 пикселей.
Следовательно, 750/15 = 50 пикселей, то есть на экране мобильного телефона с размером эскиза дизайна 1рем = 50 пикселей.
Затем в коде less мы определяем переменную @r.
Ширина div измеряется как 100 пикселей, потому что на экране с размером черновика 1rem = 50 пикселей, поэтому значение rem для div составляет: 100/50 rem, то есть 100/@r.
Высота div измеряется как 200 пикселей, потому что на экране с размером черновика 1rem = 50 пикселей, поэтому значение rem для div составляет: 200/50 rem, то есть 200/@r.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.