Решение для адаптации к большому экрану

внешний интерфейс Vue.js

задний план

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

Цель

Решите проблему путаницы страниц и осуществите адаптацию к большому экрану с различными разрешениями.

Анализ карьера

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

1. Комбинация vh, vw и rem

body,html {
  font-size:1vw
}

описывать:Определите родительский размер, а затем используйте rem в качестве единицы для различных свойств CSS, таких как высота, поля и отступы компонента, и наследуйте родительские настройки и другие единицы (1vw) для достижения адаптации.

Яма:Это может соответствовать только некоторым конкретным небольшим сценариям, а реализация на большом экране очень недружелюбна, например, мы покрываем таблицу элементов до размера шрифта: 0,5rem. В это время при размещении на большом экране шрифт адаптивный, но атрибуты его компонентов по умолчанию указаны в px. Например, если для высоты строки установлено значение 22 пикселя, шрифт после перезаписи стиля будет слишком большим и не сможет адаптироваться к высоте строки, что приведет к возникновению проблем с путаницей, таких как наложение текста.

2. Используйте комбинацию font.js+rem

(function(doc, win) {
  var docEl = doc.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  var recalc = function() {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
    docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px'
  }
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

описывать:Обратитесь к сторонним скриптам, напишите код в main.js для расчета и используйте rem для наследования для достижения адаптации.

Яма:Принцип тот же, что и в вышеописанном способе 1, также невозможно добиться адаптации на большой экран, и пит-пойнты не будут повторяться.

Решения

Гора темная, перспектива

Когда у нас нет хорошего пути, мы могли бы также использовать силу «плеч гигантов». Я нашел решение для адаптации больших данных, такое как Baidu и Netease. Через онлайн-кейсы мы обнаружили следующие правила (ниже я извлекУ NetEase есть номерснимок экрана):

image.png

image.png

логический анализ:

В приведенном выше примере используется свойство zoom transform: scale(X) css3 Сравнивая две картинки, нетрудно обнаружить, что при изменении разрешения значение масштаба меняется. Ребята из фронтенда видели это и, должно быть, поняли.
Нам нужно только следить за размером окна браузера и контролировать пропорцию изменения.

1. Инкапсулируйте глобальный компонент

На основе vue вставьте код, написанный мной, следующим образом:Этот общедоступный компонент назван ScreenAdapter для удобства описания ниже.

<template>
  <div
    class="ScreenAdapter"
    :style="style"
  >
    <slot />
  </div>
</template>
<script>
export default {
  name: '',
  //参数注入
  props: {
    width: {
      type: String,
      default: '1920' 
    },
    height: {
      type: String,
      default: '1080' 
    }
  },
  data() {
    return {
      style: {
        width: this.width + 'px',
        height: this.height + 'px',
        transform: 'scale(1) translate(-50%, -50%)'
      }
    }
  },
  mounted() {
    this.setScale()
    window.onresize = this.Debounce(this.setScale, 1000)
  },
  methods: {
    Debounce: (fn, t) => {
      const delay = t || 500
      let timer
      return function() {
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        const context = this
        timer = setTimeout(() => {
          timer = null
          fn.apply(context, args)
        }, delay)
      }
    },
    // 获取放大缩小比例
    getScale() {
      const w = window.innerWidth / this.width
      const h = window.innerHeight / this.height
      return w < h ? w : h
    },
    // 设置比例
    setScale() {
      this.style.transform = 'scale(' + this.getScale() + ') translate(-50%, -50%)'
      console.log('任你千变万化,我都不会影响性能')
    }
  }
}
</script>
<style lang="scss" scoped>
.ScreenAdapter {
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  background: red;
}
</style>

2. Используйте этот компонент как оболочку и оберните им страницу, которую мы создаем.

<ScreenAdapter> <div>大家好，我是大屏展示页面</div> </ScreenAdapter>

3. Определите веб-спецификации

  • В соответствии с дизайном, предоставленным художником (главным образом получить разрешение, данное художником, например, 1920 * 1080).
  • Макет Div в основном использует макет flex+percentage (конечно, он также может быть написан в пикселях по умолчанию в соответствии с дизайном, заданным художником).
  • Все виды космического дизайна могут быть определены в соответствии с пикселями, заданными художником.

единый ответ на вопросы

Вопрос: Многие знакомые говорят, что после присоединения будут пробелы, которые нужно отлаживать.
Решение: это связано с тем, что вводимые ширина и высота не соответствуют фактическому разрешению компьютера.

Вопрос: введенная ширина и высота такие же, как ширина и высота разрешения.Почему есть пробел?
решать:

  1. Если это соответствует, вам нужно только развернуть браузер на весь экран, чтобы увидеть правильный эффект.
  2. Замените введенные ширину и высоту на document.documentElement.clientWidth и document.documentElement.clientHeight. Получение правильных результатов, даже если не полноэкранный режим


Теперь все должны это понять😊, основа очень важна, ха-ха~~~

Заключительные замечания

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

Дух Интернета - делиться, я надеюсь, что эта статья поможет некоторым друзьям, у которых такая же проблема, как у меня.

Поделитесь технологиями и запишите лучшую жизнь.

Категории