Схема адаптации данных для большого экрана

внешний интерфейс

Вообще говоря, страница на стороне ПК не предъявляет особо жестких требований к разрешению и размеру экрана, как мобильный терминал, но для страницы типа отображения большого экрана данных необходимо продумать схему адаптации. необходимо обеспечить нормальное отображение на большинстве основных мониторов.

Почти все мониторы на рынке16：9размер, то есть1920 * 1080разрешающая способность.

идеальный эффект

  • Когда соотношение размеров экрана составляет точно 16:9, страница может отображаться в полноэкранном режиме, а содержимое заполняет дисплей.

    image-20211129143645433

  • Когда соотношение размеров экрана меньше 16:9, верх и низ страницы остаются пустыми, лево и право заполнены, а верх и низ располагаются по центру, а соотношение сторон остается 16:9.

    image-20211129143718461

  • Когда соотношение размеров экрана превышает 16:9, левая и правая стороны страницы остаются пустыми, верх и низ заполняются и центрируются, а соотношение сторон остается 16:9.

    image-20211129143809807

При изменении размера экрана динамически вычисляйте коэффициент отображения промежуточного содержимого, чтобы содержимое оставалось 16:9.

решение

rem

rem(font size of the root element), — это новая единица размера в css3, то есть размер относительно значения размера шрифта корневого элемента.

Идея состоит в том, чтобы динамически вычислить размер шрифта страницы, чтобы изменить размер rem.

идеи

Сначала возьмем в качестве примера стандартный размер экрана 1920*1080. Разделить экран на10Части, первые вычисленияrem的基准值:1920/10 = 192, затем включите всю длину, широкую, положение и размер шрифта и т. Д. Исходное устройство PX преобразуется в REM. После загрузки используйте JS для расчета ширины текущего браузера и установите шрифт HTML -Саризовать. для (当前浏览器窗口宽度 / 10), поэтому 10rem просто равно ширине окна браузера. Он также может обеспечить 100% ширину и пропорционально масштабировать страницу проекта дизайна.

Две вещи:

  1. Получите базовое значение rem. По умолчанию ширина контейнера установлена ​​1920*1080, а затем 1920/192 используется для расчета значения rem
  2. Напишите кусок кода js на странице для динамического расчетаhtml根元素的font-size

выполнить

Стоя на плечах гигантов, нам не нужно переходить от 0 к 1, чтобы удовлетворить две потребности.

Для первого пункта:

  • Установить первым@njleonzhang/postcss-px-to-remэта сумка
npm i @njleonzhang/postcss-px-to-rem -D
  • новый.postcssrc.jsконфигурационный файл
module.exports = {
  plugins: {
    autoprefixer: {},
    "@njleonzhang/postcss-px-to-rem": {
      unitToConvert: 'px', // (String) 要转换的单位，默认是px。
      widthOfDesignLayout: 1920, // (Number) 设计布局的宽度。对于pc仪表盘，一般是1920.
      unitPrecision: 3, // (Number) 允许 REM 单位增长到的十进制数字.
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) 要忽略并保留为 px 的选择器.
      minPixelValue: 1, // (Number) 设置要替换的最小像素值.
      mediaQuery: false // (Boolean) 允许在媒体查询中转换 px.
    }
  }
}
​
  • После завершения настройки px на странице будут преобразованы в rem.

По второму пункту:

  • Создайте новый файл rem.js и добавьте его в запись для динамического расчета размера шрифта.

    (function init(screenRatioByDesign = 16 / 9) {
  let docEle = document.documentElement
  function setHtmlFontSize() {
    var screenRatio = docEle.clientWidth / docEle.clientHeight;
    var fontSize = (
      screenRatio > screenRatioByDesign
        ? (screenRatioByDesign / screenRatio)
        : 1
    ) * docEle.clientWidth / 10;
    docEle.style.fontSize = fontSize.toFixed(3) + "px";
    console.log(docEle.style.fontSize);
  }
​
  setHtmlFontSize()
​
  window.addEventListener('resize', setHtmlFontSize)
})()

К этому моменту страница уже может достичь адаптивного формата 16:9.

Ссылки по теме - https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html#%E6%80%BB%E7%BB%93

GitHub.com/NJ Лео, который...

GitHub.com/quelling B…

GitHub.com/quelling B…

Категории