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

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

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

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

yprau-0l4bl.gif

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

<div className="screen-wrapper">
    <div className="screen" id="screen">
        <div class="section">A</div>
        <div class="section">B</div>
        <div class="section">C</div>
        <div class="section">D</div>
        <div class="section">E</div>
    </div>
</div>

1. Адаптивный метод на основе преобразования

Сначала рассчитайте коэффициент масштабирования и динамически установите коэффициент масштабирования элемента

в соответствии с размером экрана. Код выглядит следующим образом: 
function setScale(){
    let designWidth = 1366;//设计稿的宽度，根据实际项目调整
    let designHeight = 768;//设计稿的高度，根据实际项目调整
    let scale = document.documentElement.clientWidth/document.documentElement.clientHeight < designWidth/designHeight ? 
         (document.documentElement.clientWidth / designWidth):
         (document.documentElement.clientHeight / designHeight);
    document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%)`;
}
window.onresize = function () {
    setScale()
};

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

$design_width: 1366px;//设计稿的宽度，根据实际项目调整
$design_height: 768px;//设计稿的高度，根据实际项目调整
.screen-wrapper {
   height: 100vh;
   width: 100vw;
   background-color: aqua;
   .screen{
      display: inline-block;
      width: $design_width;
      height: $design_height;
      background: yellow;
      transform-origin: 0 0;
      position: absolute;
      left: 50%;
      .section{
         height: 200px;
         width: 200px;
         outline: 1px solid #ddd;
         line-height: 200px;
         font-size: 40px;
         text-align: center;
         display: inline-block;
      }
   }
}

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

4t3ps-6ptxc.gif

2. адаптивный метод на основе rem

Сначала вычислите коэффициент масштабирования, динамически устанавливаемый в соответствии с размером экрана, значением fontSize корневого элемента html.

setFontSize()
function setFontSize(){
    let designWidth = 1366;//设计稿的宽度，根据实际项目调整
    let designHeight = 768;//设计稿的高度，根据实际项目调整
    var fontSize = 
        document.documentElement.clientWidth/document.documentElement.clientHeight < designWidth/designHeight ? 
        (document.documentElement.clientWidth / designWidth) * 12:
        (document.documentElement.clientHeight / designHeight) * 12;
    document.querySelector('html').style.fontSize = fontSize + 'px';
}
window.onresize = function () {
    setFontSize()
};

Чтобы задать стиль, вам нужно преобразовать единицу измерения элемента px в rem.

$design_width: 1366;//设计稿的宽度，根据实际项目调整
$design_height: 768;//设计稿的高度，根据实际项目调整

@function px2rem($px) {
   $design_font_size: 12;
   @return ($px/$design_font_size) + rem;
}
.screen-wrapper {
   height: 100vh;
   width: 100vw;
   background-color: aqua; 
      display: flex;
      flex-direction: row;
      justify-content: center;
   .screen{
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: px2rem($design_width);
      height: px2rem($design_height);
      background: pink;
      .section{
         height: px2rem(200);
         width: px2rem(200);
         border: 1px solid #000;
         line-height: px2rem(200);
         font-size: px2rem(100);
         margin: px2rem(20);
         text-align: center;
         display: inline-block;
      }
   }
}

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

lt3x2-a6xmx.gif

3. Резюме

  • Преимущество решения, основанного на трансформационном масштабировании, состоит в том, что размер элемента устанавливается в соответствии с чертежом проекта без преобразования единицы длины. Недостатком является то, что при увеличении дисплея диаграммы, такие как электронные карты, будут искажены. Во избежание искажения диаграммы дизайн эскизного проекта должен быть разработан в соответствии с размером большого экрана, чтобы его можно было отобразить на экране в уменьшенном размере. Например, если 1920*1080 и 1366*768 являются черновиками формата 16:9, они должны быть разработаны в размере 1920*1080.
  • Для схемы масштабирования на основе rem единицу длины элемента необходимо преобразовать в rem. При увеличении искажения графика не будет. Когда размер шрифта корневого элемента уменьшен до
Категории