[Адаптивный] px to rem, вы все еще считаете?

внешний интерфейс CSS
[Адаптивный] px to rem, вы все еще считаете?

Мало знаний, большой вызов! Эта статья участвует в "Необходимые знания для программистов«Творческая деятельность.

предисловие

Опубликовал статью 8.29Препроцессор CSS, вы все еще только вкладываете?статье посчастливилось быть в горячем списке несколько дней 😁.

На данный момент статья набрала количество прочтений1093, количество лайков58, количество избранных34. С точки зрения данных, это все еще довольно впечатляет. Итак, я поспешил сделать вывод: есть много людей, которые не разбираются в CSS, как я, если вы не признаетесь в этом, вы можете перелезть с другого конца сетевого кабеля и ударить меня?😶?

короткий рассказ

Большой парень: Какая разница между rem, em и px?

Я: rem — относительная единица, значение основано на размере шрифта, установленном корневым элементом (по умолчанию 16px); em — относительная единица, значение относительно размера шрифта текста в текущем объекте, px — это относительная единица, а значение определяется в зависимости от разрешения экрана 😁.

Большой парень: Как преобразовать px в rem?

я: 16px = 1rem, так будет转换值 / 16можно преобразовать.

Большой Брат: Значит, я считаю каждое место вручную?

Я: ... или иначе.

Одинbad ending😫, спасибо, что сказали мне ключевое слово в концеPostCss, поднять осанку.

Бросание кирпичей и привлечение нефрита, сегодняшняя темаPostCss.Официальный сайт

PostCss

Official Words: это инструмент для преобразования кода CSS с помощью инструментов и плагинов JavaScript.

утверждение: это не "препроцессор", поскольку он не имеет таких функций, как предварительная обработка, и может использоваться вместе с препроцессором; это также не совсем "постпроцессор". Поскольку обычно считается, что постпроцессоры обрабатывают CSS в соответствии со спецификацией CSS в готовой таблице стилей, обычно к свойствам CSS добавляются префиксы браузера, но PostCSS этим не ограничивается. Итак, лучшее объяснение тому, что это процессор (платформа) с множеством функциональных плагинов, вы можете настроить необходимые функции в соответствии с вашими потребностями, и вы даже можете сами писать плагины PostCSS.

Часто используемые плагиныautoprefixerдобавить приватный префикс браузера,cssnextПозволяет использовать новые функции CSS, которые не поддерживаются браузерами. Если вы заинтересованы, вы можете проверить его по ключевым словам и использовать его.

Возвращаясь к теме, какие плагины нужны для автоматизации px to rem? ответpostcss-pxtorem.

Метод прост, а эффект потрясающий, так что приходите и учитесь! ! !

Практическое обучение

Практика — единственный критерий проверки истины [например, Vue3].

Установить

npm i postcss-pxtorem --save

Настроить Postcss

Новое в рамках проектаpostcss.config.jsдокумент

module.exports = {
  plugins: {
    'postcss-pxtorem': {
       //根元素字体大小
       rootValue: 16,
       //匹配CSS中的属性，* 代表启用所有属性
       propList: ['*'],
       //转换成rem后保留的小数点位数
       unitPrecision: 5，
       //小于12px的样式不被替换成rem
       minPixelValue: 12,
       //忽略一些文件，不进行转换，比如我想忽略 依赖的UI框架
       exclude: ['node_modules']
     }
  }
}

После добавления попробуйте перезапустить проект, чтобы файл вступил в силу~

После перезагрузки откройтеChromeКонсоль, вы можете обнаружить, что все px автоматически конвертируются в rem 😁.

image.png

image.png

В соответствии с конфигурацией мы можемfont-sizeРеализуйте макет размера страницы для тестов, но если вы продолжаете писать мертвым16как реализовать адаптивную верстку?

Для достижения разных эталонных значений, соответствующих разной ширине устройства, необходимо создать новыеrem.js, код показан ниже.
Главная мысль:Основываясь на ширине 1920, определенной эскизным проектом, и размере шрифта корневого элемента 16, динамически рассчитывается размер шрифта различных корневых элементов на разных экранах.

const baseSize = 16
function setRem() {
  const scale = document.documentElement.clientWidth / 1920
  document.documentElement.style.fontSize = baseSize * scale + 'px'
}
setRem()
window.onresize = function () {
  setRem()
}

существуетmain.jsпредставлять

import './rem.js'

Адрес онлайн-кейса, перетащите и почувствуйте.

Суммировать

Адаптивное познание ранее застряло в媒体查询, только чтобы обнаружить, что существует такая полезная платформа для плагинов! ! ! Откройте дверь в новый мир (хотя я проверил информацию, я обнаружил, что эта штука уже существовала, и она сдерживает...)

комбинировать媒体查询 + postcss-pxtoremЯ считаю, что большинство адаптивных проблем можно решить эффективно.

Если это не работает, вы можете проверить область комментариев, это тоже проблема версии~

постучать по доске

Определение em очень специфично, и его значение зависит от размера шрифта текста в текущем объекте.

По умолчанию 1em = 16px. Если для родительского элемента установлено значение 1,2 em, а для дочернего класса установлено значение 1,2 em, размер шрифта дочернего элемента на самом деле составляет 1,2 * 1,2 = 1,44 em, что составляет 1,44 * 16 = 23,04 пикселя при преобразовании в px.

Небрежный вывод о том, что em является размером относительно родительского элемента. Причина в том, что когда родительский элемент не установлен, значение по умолчанию равно 1em, и поскольку em наследует размер родительского шрифта, дочерний элемент также имеет размер 1 * 1 = 1em, что создает иллюзию относительно родительского элемента.

Совет em для ознакомления с документацией MDN

Установите размер шрифта элемента body на 62,5% (62,5% от размера по умолчанию 16px), что равно 10px. Теперь вы можете легко использовать единицы em для любого элемента, вычисляя кратные базовому размеру 10px. Таким образом, 6 пикселей = 0,6 см, 8 пикселей = 0,8 см, 12 пикселей = 1,2 см, 14 пикселей = 1,4 см, 16 пикселей = 1,6 см.

Спасибо за совет от большого парня в области комментариев. ✌

Ссылаться на

Postcss Deep Dive: Что вам нужно знать
В чем разница между px, em и rem

Категории