Как адаптироваться к мобильному терминалу rem

JavaScript CSS PostCSS

спроси у кота

Как правило, когда мы разрабатываем страницы в компании, диаграмма дизайна пользовательского интерфейса представляет собой диаграмму размером 750 пикселей, которая основана на дизайне iPhone 6. Если мы используем правильную конфигурацию, мы можем написать столько пикселей, сколько есть на карте пользовательского интерфейса, что наиболее удобно для программистов. Но как это настраивается?

Не будь квадратным, это на самом деле очень просто, просто следуй идее~~~

Если мы его не настроим, сколько пикселей мы можем прописать в CSS, чтобы восстановить дизайн?

Возьмем пример~

Предположим, что сейчас на изображении есть кнопка шириной 100 пикселей, а изображение пользовательского интерфейса имеет размер 750 пикселей.

Ответ заключается в том, что мы должны написать 100 пикселей / 2 = 50 пикселей. В css ширина = 50px и все.

Так почему же 100 пикселей делятся на 2? ? ? Потому что dpr iPhone = 2.

Так что же такое дпр?

Полное название dpr — window.devicePixelRatio, что равно физическим пикселям/провалам. На самом деле это соотношение. (Физические пиксели — это небольшие сетки, которые используются для отображения разных цветов. Провалы можно понимать как виртуальные пиксели, точно так же, как написанный нами css. Если вы не понимаете этого, просто игнорируйте...)

Начиная с iphone4, iphone имеет dpr, равный 2. Так что на самом деле разделите изображение пользовательского интерфейса на 2, сколько пикселей вы должны написать в css.

Разве это не легко~~~

Выше описано, как восстановить единицу px проекта проекта, и теперь есть другая проблема, не все из нас используют iphone6, или другие мобильные телефоны с различными размерами экрана, такие как крайний iphone 4, iphone 6s plus. y мобильные телефоны с разным размером экрана, на каждом мобильном телефоне отображается текст и изображения одинакового размера? Это раздражает, так что,Мы должны адаптироваться! ! !

Что подходит?

Методы подобны оружию, их бывает много, в зависимости от того, какой из них вы выберете в соответствии с реальной ситуацией, вот методы:

  1. 100% адаптация макета
  2. рем для адаптации
  3. ...

Начнем с рем

Начинайте урок~, слушайте лекцию~ (стучите по доске)

Возьмем тот же пример, что и выше: предположим, что на картинке есть кнопка шириной 100 пикселей, а изображение пользовательского интерфейса — это картинка размером 750 пикселей. Чтобы адаптироваться к разным размерам экранов, сколько rem мы должны написать для кнопки? rem — это размер шрифта корневого элемента! Корневой элемент<html>Этикетка. страница в Интернете<html>Размер шрифта по умолчанию — 16 пикселей. То есть размер шрифта браузера по умолчанию составляет 16 пикселей.

Метод преобразования: 1рем = 16 пикселей. Таким образом, 100px = 100/dpr/16 = 3,125 rem. Значит ширина кнопки в css, надо писать 3.125rem. Размер кнопок на экране такой же, как у iphone 6, как показано на диаграмме пользовательского интерфейса.

Но как изменить размер корневого шрифта?

1. Используйте медиа-запрос @media, чтобы установить размер корневого шрифта для разных экранов, и вам нужно написать много кода CSS, потому что существует так много размеров экрана, что сложно написать их все один за другим.

2. Рекомендую написать js, что можно сделать в несколько строк

Ниже приведен код js, который изменяет размер корневого шрифта в зависимости от размера экрана. Рекомендуется написать его на странице входа,

(function() {
 function autoRootFontSize() {
  document.documentElement.style.fontSize = Math.min(screen.width, document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';}
  window.addEventListener('resize', autoRootFontSize);
  autoRootFontSize();
})();

При открытии и изменении страницы будет выполняться событие resize, которое использует свойство getBoundingClientRect (вы можете проверить его на MDN), которое фактически возвращает левое, верхнее, правое, нижнее, ширину, высоту объекта, в пикселях . (Обратите внимание на проблемы совместимости, IE8 и ниже не имеют ширины и высоты). Ширина экрана и ширина html принимают минимальное значение (на самом деле, в большинстве случаев они одинаковы). Мобильный терминал обычно делится на 32, чтобы слова были крупнее и четче.

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

Не будь квадратным, это на самом деле очень просто... Вот что я использую в своей работе.

PostCSS — это инструмент, который использует плагины для преобразования CSS. Может работать с CSS, обычно в сочетании с такими инструментами, как webpack. В моем проекте используется веб-пакет. Создайте файл postcss.config.js в корневом каталоге проекта. Проект автоматически прочитает эти файлы классов конфигурации. Содержимое этого js:

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 32,
      propList: ['*'],
      minPixelValue: 2
    }
  }
};

Плагины, которые вы используете для плагинов, например, здесь используются два плагина autoprefixer, postcss-pxtorem.

autoprefixer заключается в добавлении соответствующего префикса перед css, это намного меньше, чем писать строки кода.

postcss-pxtorem заключается в преобразовании px в rem, а это значит, что мы изменили корневой шрифт выше, и px также можно преобразовать в rem, но этот плагин может автоматически конвертировать rem в соответствии с вашим корневым шрифтом, это очень удобно?

rootValue — это размер корневого шрифта, который изначально установлен на 32, что более понятно для мобильных устройств.

В настоящее время мы используем только эти два плагина на мобильной стороне.

Как упоминалось выше, для использования в сочетании с веб-пакетом, как это должно быть написано в веб-пакете?

module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
      },
      {
        test: /\.css/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
}

Добавьте postcss-loader сразу после css-loader. Он будет обрабатывать вещи в postcss, команду установки postcss-loader: npm install --save-dev postcss-loader

(Плагин внутри массива USE выполняется справа налево и, наконец, выполняет Style-Loader. Этот порядок еще необходимо знать.)

Подводя итог, мы получаем:

Карта пользовательского интерфейса составляет 100 пикселей, вы пишете 100 пикселей прямо в css, это так просто. Независимо от размера экрана размер шрифта будет меняться вместе с ним, и это всегда будет наиболее подходящий размер. Более того, упакованный код представляет собой код с префиксом. Только не будь слишком крутым.

Если что-то не так, прошу меня поправить, надеюсь, вам понравится~~

Категории