Разумное использование rem для реализации визуализации данных на большом экране

CSS

Визуализация данных на большом экране

В ежедневной работе по фронтенд-разработке мы часто сталкиваемся с некоторыми проектными требованиями для больших экранов, например, большой экран 3*3, фактический размер экрана 5760*3240, но размер проекта, который мы получили, 1920*1080 , 5 * 3 Фактический размер экрана 9600 * 3240, но размер полученного нами эскиза дизайна составляет 3200 * 1080. Видно, что полученный нами эскиз дизайна в основном представляет собой соотношение размеров фактического размера / 3 , то как мы можем сделать свой собственный Что с отладкой в ​​​​среде разработки? И добиться экранизации?

Используйте amfe-гибкий

amfe-flexible в основном используется для решения проблемы адаптации мобильных терминалов amfe-flexible устанавливает размер шрифта html равным ширине разрешения экрана/10, то есть размер шрифта html с разрешением 1920*1080 должен быть 192.

Установить
npm install amfe-flexible -S
использовать
// main.js引入
import 'amfe-flexible';
с помощью рем

rem — это новая относительная единица длины в CSS3, которая относится к размеру вычисляемого значения font-size относительно корневого элемента html. Его можно просто понять как процент от ширины экрана. После использования amfe-flexible для установки размера шрифта html в ширину разрешения экрана/10 мы можем рассчитать его на основе размера корневого элемента html.

根html的font-size为192；
// px
.dom { 
    width: 100px;
}
// 自动转换成rem
.dom {
    // 100/192
    width: 0.52083333rem;
}

Но у нас на странице много единиц пикселей. Если каждый из них нужно вычислять вручную, это увеличит объем работы. Все, что мы можем использовать.postcss-pxtorem, внедрить пакет автоматических вычислений, чтобы автоматически преобразовывать пиксели, которые я определил, в рем-единицы.

Используйте postcss-pxtorem

postcss-pxtorem преобразует px в rem, а единица rem используется для адаптации к экранам разной ширины.Результат рассчитывается в соответствии со значением размера шрифта тега, 1rem = значением размера шрифта тега html.

npm install postcss-px2rem -S

Настроить postcss-pxtorem Создайте новый файл .postcssrc.js

module.exports = {
    "plugins": {
      'postcss-pxtorem-include': {
        include: 'src/views/fullScreen/*', // 制定转换的目录
        rootValue: 320, // 设置根据多大设计稿尺寸
        unitPrecision: 6,
        propList: ['*'],
      },
    }
  }

Примечание: include может указывать каталоги или файлы, которые необходимо преобразовать в px-rem. Особого внимания требует значение rootValue, это значение ширины полученного чертежа/10, например, чертеж проекта 1920*1080, здесь rootValue: 192, если размер эскиза 3200*1080 (5* 3) размер, Здесь rootValue: 320;

анализировать

3*3 большой экран Проектный размер эскиза 1920*1080 Реальный размер проекции 5760*3240 Мы устанавливаем DOM в соответствии с размером эскиза дизайна

//根html的font-size:192
.dom {
    width: 200px;
    height: 200px;
}
// 转为rem
.dom {
    // 200/192
    width: 1.0416666667rem;
    height: 1.0416666667rem;
}

При фактическом размере экрана 5760*3240 фактическая ширина и высота, соответствующие DOM, рассчитываются следующим образом:

// 根html的font-size: 576
.dom {
    // 1.0416666667 * 576
    width: 600px;
    height: 600px;
}

Пример просмотра

5*3 большой экран Проектный размер эскиза 3200*1080 Реальный размер экрана 9600*3240

//根html的font-size: 320
.dom {
    width: 200px;
    height: 200px;
}
// 转为rem
.dom {
    // 200/320
    width: 0.625rem;
    height: 0.625rem;
}

При фактическом размере экрана 9600*3240 фактическая ширина и высота DOM рассчитываются следующим образом:

// 根html的font-size: 960
.dom {
    // 0.625 * 960
    width: 600px;
    height: 600px;
}

Пример просмотра

Если вы столкнетесь с диаграммами и т. д., вам необходимо динамически установить размер.
// num为设置的大小（px）
function getSizeByScreen(num) { 
        // 这里的3200为你设计稿的宽度。
      return Math.ceil((num / 3200) * window.screen.width);
   }
Категории