Схема компоновки мобильного терминала третьего поколения

внешний интерфейс CSS
Схема компоновки мобильного терминала третьего поколения

Вы обнаружили, что мобильный терминал Taobao H5 не использует единицы rem и vw, а использует единицы px, как и веб-проект. Хотя это px, он также отлично отображает всю страницу. Как реализуется FE Taobao?

В последнее время я изучаю схему дизайна макета, изучая и понимая дизайнерские идеи Ali fusion.design и комбинируя с проблемой макета px мобильной версии Taobao H5. Постепенно у меня появляются некоторые идеи, и вот комплексная аранжировка, которую можно рассматривать как введение.

1. рем и фольксваген

И rem, и vw призваны решить проблему мобильной адаптации. Самым удачным решением rem является lib-flexible от Taobao, который делит весь макет на 10 частей через javascript для эффективного макета. Однако есть проблема расчета dpr, и будет проблема несовпадения фаз на некоторых мобильных телефонах со странным dpr. Позже был произведен макет vw.После использования vw нет необходимости делить макет с помощью javascript.Вместо этого весь макет автоматически делится на 100 равных частей, то есть 1vw=1% от ширины страницы .

1.1, проблема рем

  • Производительность не очень хороша на странном оборудовании dpr, например, некоторые модели высокого класса Huawei используют раскладку rem, чтобы сбить с толку.
  • Есть два способа установить размер корневого шрифта, один из них - медиа-запрос, преимущества: нет необходимости использовать дополнительные js для изменения шрифта html, недостатки: прерывистый или можно полностью добиться единых спецификаций макета для всех устройств;
  • Другой - js для динамического изменения шрифта html, преимущества: непрерывный, недостатки: не так хорошо, как написание медиа-запросов напрямую;
  • Отсутствие поддержки css3 calc требует интенсивного взлома @media;
  • Проблемы также могут возникать со ссылками на iframe;
  • Необходимо решить проблему границы 1px на ios, но это было решено в lib-flexible: (1px становится 2px и уменьшается вдвое на initial-scale=0.5
  • rem необходимо ввести библиотеку lib
  • Если размер шрифта html установлен ниже 12 пикселей, он все равно будет рассчитываться в соответствии с 12px = 1 rem, поэтому все размеры с использованием единиц rem неверны.

1.2, проблема vw

  • Уровень поддержки не очень, Android 4.4 и ниже не поддерживаются

1.3 Их общие проблемы

  • необходимо рассчитать для достижения цели адаптации
  • Внедрите дополнительные инструменты для завершения преобразования на этапе компиляции.
  • Пользовательский интерфейс не подходит для регрессионного тестирования. Ведь черновик дизайна px, а страница rem или vm.
  • являются относительными единицами. Долей rem можно управлять, контролируя размер шрифта html, в то время как пропорция vw является фиксированной.
  • Невозможно разделить единый набор инженерных решений с веб-проектами, потому что веб-проектам не нужно использовать единицы измерения rem и vw.

2. Первоначальный замысел мобильной верстки

  1. Может легко получить любой макет
  2. Благодаря черновому дизайну приложение может иметь идеальный эффект на разных устройствах.

Хотя rem и vw могут хорошо справляться со своим первоначальным назначением, но при этом у них есть еще и цена (т.е. проблемы у них). Итак, есть ли решение, которое может избежать вышеупомянутых проблем rem и vw и хорошо выполнить первоначальное намерение?

2.1 Новый блок Units (данный раздел взят с https://fusion.design/design/doc/16)

DP - единственная единица, доступная в дизайне пользовательского интерфейса.

Так как ДП в разных устройствах называется по-разному, и единицы, используемые для описания размера шрифта, разные (такие как SP, PT), но основные методы и принципы его расчета одинаковы и распространены, поэтому в процессе проектирования мы учитываем строгость, а способ записи только цифр без единиц принимается единообразно.

Причины выбора ДП

Плотность пикселей PPI: относится к количеству пикселей (Px), содержащихся в каждом дюйме

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

Пиксели, не зависящие от плотности (DP): независимые от устройства пиксели

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

формула преобразованияКогда PPI экрана 160, 1DP=1PX, например: Iphone4, Iphone5, Iphone6, PPI 326, под этими экранами 1DP=2PX

DP=(PX160)/PPI PX=DP(PPI/160)

правило вырезаDP - это язык, используемый совместно с кодом разработки, но некоторые изображения, такие как jpg и png, которые необходимо разместить, не являются векторами и по-прежнему используют px в качестве единицы.В настоящее время нам нужно адаптировать изображения к экранам разных ИЦП.

На иллюстрации показаны значения пикселей при адаптации баннера к экранам разного разрешения:

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

  • 【Mobile】Выберите 3-кратный вывод изображения, подходящий для ios и android.
  • [Интернет] Выберите 2-кратный вывод изображения, адаптируйтесь к обычному экрану и экрану сетчатки.

Правила настройки холста

  • 【Мобильный】Выберите 375*667 в качестве размера чертежа.
  • 【Android】 Выберите размер рисунка 360*640.
  • [Интернет] Использовать ширину 1440 в качестве размера чертежа

3. Конкретная реализация

смысл

  1. В проекте проекта в качестве единицы измерения пикселей используется dp. Конкретные правила см. выше.切图规则и画布设计规则
  2. С rem и vw проблем более-менее, поэтому в качестве единицы реализации используется px единообразно
  3. Web и wap могут использовать один и тот же набор инженерных решений
  4. Реализуйте взаимосвязь отображения между dp черновика дизайна и px в реальном приложении, а px будет меняться в зависимости от размера окна устройства.

Конечно, если рукопись имеет размер px, вы также можете вручную преобразовать px в dp.

Чтобы реализовать это общее решение, ядро ​​лежит в статье 4 (чтобы реализовать взаимосвязь отображения между dp эскизного проекта и px в реальном приложении), и этот процесс не может быть полностью решен только на этапе инженерной компиляции, он должен работать с браузером. Только работая вместе, мы можем достичь наших целей.

помещение

  1. css бизнес-модуля нельзя выделить в самостоятельный css-файл, а нужно выводить в js-файл (возможность style-loader), чтобы была базовая возможность изменять css-контент.
  2. определить единицу измеренияdp, указывая, что это размер на эскизе проекта (аналогично тому, что в апплетеrpx).
  3. Не все px должны быть эластично преобразованы, а px контейнера, который необходимо эластично преобразовать, равномерно изменяется наdp, в противном случае продолжайте использовать px.

Предположим, мы определяем мобильный элемент-контейнер H5 в соответствии с черновиком мобильного дизайна:

<div class="box">
	<div class="tip">this is tip</div>
</div>

.box {
	/* 这里使用的单位为dp，表示需要根据设备大小进行弹缩 */
	width: 100dp;
	height: 150dp;
	background: red;
}

.box .tip {
	/* 使用的单位为px，不需要根据设备大小进行弹缩。无论设备怎么变化，该元素的宽高都是10像素。 */
	width: 10px;
	height: 10px;
	background: blue;
}

Наконец, элемент.boxОн изменит свой размер в соответствии с изменением ширины и высоты устройства..boxШирина и высота элементов на разных устройствах:

оборудование ширина высокий
эскизный проект 100dp 150dp
iPhone 5/SE 85.33px 128px
iPhone 6/7/8 100px 150px
iPhone 6/7/8 Plus 110.4px 165.60px
iPhone X 100px 150px
Galaxy S5 96px 144px

Чтобы реализовать эту функцию, вы должны сначала предоставить вспомогательную функцию, которая преобразует dp в px: unitParser. Потому что эта функция нужна двумя следующими способами, чтобы помочь нам достичь конечной цели.

const allowMiniPixel = () => {
    let allow = false;
    if (window.devicePixelRatio && devicePixelRatio >= 2) {
        let ele = document.createElement("div");
        ele.style.border = ".5px solid transparent";
        document.body.appendChild(ele);
        allow = 1 === ele.offsetHeight;
        document.body.removeChild(ele);
    }
    return allow;
}();
function unitParser(unit) {
	let type = void 0 === unit ? "undefined" : getType(unit);
	if ("number" === type) {
		unit += "dp"
	}
	if ("string" !== type) {
		return unit;
	}

	let regExp = /^([\d\.]+)(np|dp)?$/g;
	return unit.replace(regExp, (chars, count, suffix) => {
		count = Number(count)
		switch (suffix) {
			case "np":
				// np不做转换。1np就是1px 100np就是100px
				break;
			case "dp":
			default:
				// 注意这里375。说明的上文说了，设计稿是按照iphone 6的375进行设计的。
				// deviceWidth为屏幕的宽度。iphone 5/SE为320、iphone 6/7/8为375
				count = count / 375 * deviceWidth
		};

		if (!allowMiniPixel && count < 1) {
			count = 1
		}
		return count + "px";
	})
}

3.2.1 Способ 1: стилизованные компоненты + css-in-js + JSX

вид:

import styled from 'vue-emotion'
import unitParser from './unitParser.js';

const box = styled('div')`
	width: ${unitParser("100dp")};
	height: ${unitParser("150dp")};
	background: red;
`

const tip = styled(div)`
    width: 10px;
	height: 10px;
	background: blue;
`

new Vue({
  render() {
    return (
      <box>
        <tip>this is a tip</tip>
      </box>
    )
  }
})

реагировать:

import styled from 'styled-components';
import unitParser from './unitParser.js';

const Box = styled.div`
    width: ${unitParser("100dp")};
	height: ${unitParser("150dp")};
	background: red;
`
const Tip = styled.div`
    width: 10px;
	height: 10px;
	background: red;
`

render(
  <Box>
    <Tip>this is a tip</Tip>
  </Box>
)

Уведомление: При использовании этого решения нужно обратить внимание на сочетание таких инструментов, как sass и post-css, что увеличит сложность проекта. Кроме того, это решение будет генерировать большое количество атрибутов стиля элемента, что приведет к увеличению сложности модели DOM.

3.2.2 Метод 2: Динамический расчет во время работы браузера

Настройте загрузчик css webpack для обработки unitParser.

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css = ".box {width: " 
+ unitParser("100dp") 
+ "; height: " 
+ unitParser("150dp") 
+ "; background: red;} .box .tip {width: 10px; height:10px; background: blue}";

styleInject(css);

3.2.3, преимущества и недостатки

преимущество:
  1. Есть много проблем с rem и vw, упомянутых в начале статьи, и это решение прекрасно решается.
  2. Его также можно смешивать с любым другим блоком, а это значит, что в этой схеме также можно использовать предыдущие методы rem и vw.
недостаток:
  1. Вне зависимости от первого метода или второго, инженерная сложность проекта возрастет, но по сравнению с текущими инструментами, такими как px2rem и px2viewport, обрабатывающими rem и vm, об этой сложности вообще не стоит упоминать.
  2. Увеличьте размер файла пакета js и уменьшите размер файла css. Однако общего увеличения объема не происходит, в файл js перемещается только css-контент части бизнеса.

Наконец

  1. Позаимствовал большую часть инженерных возможностей, в основном возможность использовать css в js
  2. Но у этого есть недостаток. То есть при изменении размера окна макет будет беспорядочным. Однако эффект невелик, потому что ревизия размера окна не появится на реальной машине. И этот набор планов полностью сглаживает разницу между web и wap, и он полностью согласован на уровне разработки. Если вам нужно увеличить масштаб, используйте dp, если вам это не нужно, используйте np и px в качестве единиц измерения.
  3. Это решение неплохое, намного лучше, чем rem и vw. Это действительно относится к схеме расположения мобильных терминалов третьего поколения.
Категории