Рассказываем о решении веб-экранизации

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

1562402019217

Сторона ПК

Функции

Экран ПК имеет следующие характеристики:

Размер экрана обычно больше, чем13.3英寸
Пользователи часто перетаскивают размер браузера

1562399024495

причина

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

решить

Поэтому на стороне ПК только черезмакет сердцачтобы разрешить эту ситуацию.

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

кейс

код

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>版心布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html,body{
      height: 100%;
      background-color: #ccc;
    }
    main{
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      font-size: 40px;
      background-color: pink;
    }
    header{
      height: 80px;
      background-color: aqua;
    }
  </style>
</head>

<body>
  <main>
    <header>版心</header>
    <section>内容</section>
  </main>
</body>
</html>

Эффект

1562400533725

мобильный

Функции

Экран под мобильным терминалом имеет следующие характеристики:

Экран меньше, чем сторона ПК
Браузер не на стороне ПК, и его размер можно изменить в любое время.

причина

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

решить

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

кейс

2019-04-30090218

код

Обычные изображения и контейнеры можно заменить процентами или флексами при записи единиц измерения.

Для некоторых элементов на странице, таких как размер шрифта, вы можете использовать Taobao.flexibile + remрешение

Таобао гибкий

нормальная схема потока

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>流式</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #ccc;
    }



    ul {
      list-style: none;
      display: flex;
      height: 100px;
    }

    li {
      flex: 1;
      border: 1px solid #000;
      background-color: aqua;
    }
  </style>
</head>

<body>
  <main>
    <section>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </section>
  </main>
</body>

</html>

Эффект

2019-04-30090218

Таобао гибкий + рем

Гибкий и гибкий макет не имеет ничего общего, жена и торт жены не имеют ничего общего

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

модуль rem css, относительная длина, его значение равно размеру шрифта корневого тега, такого как
```
   <style>
    html {
      font-size: 100px;
    }
    div {
      /* 相对于 100px */
      font-size: 1rem;
    }
  </style>
  <div>
    rem单位
  </div>
```
Эффект
Таобао гибкий
1. Это библиотека js, разработанная командой ручных даосов, которая обрабатывает настройки rem на мобильном терминале.
2. Измените размер шрифта корневой метки на одну десятую размера текущего экрана.
3. Изменился размер шрифта корневого тега, а также элементы или размеры шрифта, в которых используются единицы rem.

обработать

1562486744388

гибкий код

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>版心布局</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <script> (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); function setRemUnit() { var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + "px"; } setRemUnit(); window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow", function (e) { if (e.persisted) { setRemUnit(); } }); if (dpr >= 2) { var fakeBody = document.createElement("body"); var testElement = document.createElement("div"); testElement.style.border = ".5px solid transparent"; fakeBody.appendChild(testElement); docEl.appendChild(fakeBody); if (testElement.offsetHeight === 1) { docEl.classList.add("hairlines"); } docEl.removeChild(fakeBody); } })(window, document); </script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div>

  </div>
  <script>
    window.onload = function () {
      setFont();
      window.addEventListener("resize", function () {

        setFont();
      })
      function setFont() {
        var div = document.querySelector("div");
        div.style.fontSize = document.querySelector("html").style.fontSize;
        div.innerHTML = "html的字体大小为" + document.querySelector("html").style.fontSize;
      }
    }
  </script>
</body>

</html>

гибкий эффект

2019-04-30090218

Сочетайте гибкий и рем

По вышеуказанным характеристикам

flexibleПучокразмер шрифта корневой меткиИзменить на 1/10 экрана
remМожет меняться в зависимости от размера шрифта корневого тега

придумал следующее решение

Предположим, что ширина проектного чертежа640px
Размер шрифта корневого тега64pxто есть1 rem = 64px => 1px=1/64rem
Размер div в исходном проекте дизайна составляет 100 пикселей, а размер шрифта — 100 пикселей.

Изменить единицу измерения px на единицу rem

div{
	width:100px;
	font-size:100px;
}
修改为
div{
	width:calc( 100rem / 64 );
	font-size:calc( 100rem / 64 );
}

Ширина эскизного проекта также абстрагируется.

div{
	width:calc( 100rem / 十分之一的设计稿宽度 );
	font-size:calc( 100rem / 十分之一的设计稿宽度 );
}

полный код

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>版心布局</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <script> (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); function setRemUnit() { var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + "px"; } setRemUnit(); window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow", function (e) { if (e.persisted) { setRemUnit(); } }); if (dpr >= 2) { var fakeBody = document.createElement("body"); var testElement = document.createElement("div"); testElement.style.border = ".5px solid transparent"; fakeBody.appendChild(testElement); docEl.appendChild(fakeBody); if (testElement.offsetHeight === 1) { docEl.classList.add("hairlines"); } docEl.removeChild(fakeBody); } })(window, document); </script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    div {
      width: calc(100rem / 64);
      height: calc(100rem / 64);
      font-size: calc(100rem / 64);
      background-color: aqua;
    }
  </style>
</head>

<body>
  <div>

  </div>
  <script>
    window.onload = function () {
      setFont();
      window.addEventListener("resize", function () {

        setFont();
      })
      function setFont() {
        var div = document.querySelector("div");
        div.style.fontSize = document.querySelector("html").style.fontSize;
        div.innerHTML = "html的字体大小为" + document.querySelector("html").style.fontSize;
      }

    }
  </script>
</body>

</html>

окончательный эффект

2019-04-30090218

маленькое сердце

Практика маленького сердца доски на самом деле является своего рода макетом потока, но настройка максимальной ширины добавляется к самому внешнему контейнеру, например

main{
	max-width:540px;
}

Ссылаться на

2019-04-30090218

апплет

Апплет может понять специальный мобильный терминал, но самого апплета не существуетremЭтот блок, замененныйrpxЭтот блок, переведенный как Responsive Pixel, работает аналогичноrem

Функции

Нет необходимости вносить Taobao в апплетflexibleэту библиотеку, потому что встроеннаяrpxБлок реализованrem + fleixibleФункция.

В апплете ширина экрана унифицирована как750 rpxСледовательно: существует следующая зависимость.

ширина экрана	Отношение конверсии px и rpx
750 px	1 px = 1 rpx
375 px	1px = 2 rpx
any px	1 px = any / 750 rpx

код

Если черновик дизайна составляет 375 пикселей,viewШирина Высота 100px, размер шрифта 100px

    view {
      width: 200rpx;
      height: 200rpx;
      font-size: 200rpx;
      background-color: aqua;
    }
    
    <view> 小程序rpx </view>

вв и вх

В мобильном терминале также есть следующие блоки, которые также очень просты в использовании и могут легко решать проблемы.

единица измерения	имя
vw	100vw равно ширине области просмотра
vh	100vh соответствует высоте окна просмотра.
vMax	больше vw и vh
vMin	меньшее из vw и vh

Вышеупомянутые единицы поддерживаются в мобильном терминале или в апплете.

Эскизный проект375px, есть размер100pxизdiv, размер шрифта тоже100px.

375px = 100 vwТак1 px = 100vw / 375
следовательно100px = 100vw * 100 / 375;

код

Обратите внимание, что синтаксис calc строг, особенно пробелы

    main {
      background-color: pink;
      width: calc(100vw * 100 / 375);
      height: calc(100vw * 100 / 375);
      font-size: calc(100vw * 100 / 375);
    }

Адаптивный макет

Понятие отзывчивости делится на две категории

Один из них работает с обратной стороны
Один интерфейс отзывчивый

Бэкенд Отзывчивый

Фоновый сервер основан на внешнем браузере.User-AgentЧтобы определить, является ли исходный запрос ПК или мобильным, а затем сервер динамически возвращает страницу ПК или мобильную страницу. Эта функция легко присутствует в nginx. JD.com, Tmall и Taobao тоже такие.

интерфейс отзывчивый

В основном относится к медиа-запросам для достижения.

Напишите набор кода на интерфейсеhtml + css + javascript, вы можете изменить стиль страницы в зависимости от ширины экрана зимой

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

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

кейс

Например, реализация большого экрана для отображения следующей строки3колонка, нижняя строка на маленьком экране2Список.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    ul {
      overflow: hidden;
    }

    li {
      float: left;
      height: 100px;
      border: 1px solid #000;
      background-color: pink;
    }

    /* 大屏幕 */
    @media screen and (min-width:800px) {
      li {
        width: 33.33%;
      }
    }
    /* 小屏幕 */
    @media screen and (max-width:800px) {
      li {
        width: 50%;
        background-color: lawngreen;
      }
    }
  </style>
</head>

<body>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
</body>

</html>

Эффект

2019-04-30090218

разное

Когда индустрия хочет внедрить адаптивный макет, обычно используется Twitter.bootstrapФреймворк получил высокую оценку, а также он совместим с ie8.