Mobile Layout Вопросы для собеседования Комплексная проверка ваших навыков CSS (центральная часть)

CSS

предисловие

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

Даже основное рабочее содержание многих интерфейсов заключается в разработке мобильного терминала, потому что содержимое мобильного терминала разнообразно: апплет WeChat, апплет Alipay, апплет Jingdong, быстрое приложение, общедоступная платформа WeChat, мини-игра WeChat, гибридное приложение, Н5 и тд...

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

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

Где люди, там реки и озера, где страницы, там и макеты.

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

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

Расположение по центру

На самом деле центральную планировку практически все видели в повседневной жизни, но в то время не обращали на нее особого внимания.

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

А макет, который впечатляет пользователя, вообще не очень хорош (за исключением некоторых прикольных макетов, которые отличаются):

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

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

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

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

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

Реализовано с использованием библиотеки CSS

С помощью существующей на рынке библиотеки CSS мы можем легко добиться центрирования макета, особенно можно использовать ключевые слова на китайском языке, что очень полезно для нашей памяти, этоchinese-layout.

Затем мы используем библиотеку CSS с китайским градиентом, чтобы украсить наш интерфейс:chinese-gradient.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在这里用link标签引入中文布局 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">

  <!-- 在这里用link标签引入中文渐变色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }

    /* 令html和body全屏显示 */
    html, body { height: 100%; }

    body {
      /* 先在父元素上设置grid布局 */
      display: grid;
      grid: var(--居中);

      /* 给个好看的渐变色 */
      background: var(--霾灰);
    } 

    .center {
      /* 指定子元素在中心位置 */
      grid-area: 中;

      /* 给子元素设置宽高，不然宽高为0导致什么也看不见 */
      width: 150px;
      height: 150px;

      /* 给一个好看的背景色 */
      background: var(--胭脂粉);
    }
  </style>
</head>
<body>
  <div class="center"></div>
</body>
</html>

результат операции:

Реализация абсолютного позиционирования

Центрированные макеты обычно делятся на два типа: один имеет фиксированную ширину и высоту, а другой — нефиксированную ширину и высоту.

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

Эти два метода также создают разные технические реализации.Метод абсолютного позиционирования подходит для фиксированной ширины и высоты:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }

    /* 令html和body全屏显示, 并有一个灰色背景 */
    html, body { height: 100%; background: gray; }

    /* 先在父元素上设置相对定位 */
    body { position: relative } 

    .center {
      /* 绝对定位 */
      position: absolute;

      /* 上下左右全部为0 */
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      /* 给定宽高 */
      width: 70%;
      height: 25%;

      /* 令外边距自动填充 */
      margin: auto;

      /* 白色背景 */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center"></div>
</body>
</html>

результат операции:

  • Если ширина и высота не заданы, поле будет того же размера, что и родительский элемент, потому что абсолютное позиционирование равно 0 вверх, вниз, влево и вправо, что означает, что оно близко к краю родительского элемента.
  • Дана фиксированная ширина и высота, но не записаноmarginЕсли это так, поле будет зафиксировано в верхнем левом углу, потому что верхнее и левое имеют более высокий приоритет.
  • далmargin: auto;, браузер автоматически заполнит поля, чтобы отцентрировать их.
  • Преимущество этого метода реализации в том, что он имеет хорошую совместимость и почти не использует какие-либо новые возможности CSS, все из которых являются классическими свойствами.

Абсолютное позиционирование + отрицательные поля

Этот метод также подходит для фиксированной ширины и высоты:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }

    /* 令html和body全屏显示, 并有一个灰色背景 */
    html, body { height: 100%; background: gray; }

    /* 先在父元素上设置相对定位 */
    body { position: relative }

    .center {
      /* 绝对定位 */
      position: absolute;

      /* 上方和左方为50% */
      top: 50%;
      left: 50%;

      /* 给定宽高 */
      width: 300px;
      height: 200px;

      /* 上外边距为负的给定高度的一半 */
      margin-top: -100px;

      /* 左外边距为负的给定宽度的一半 */
      margin-left: -150px;

      /* 白色背景 */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center"></div>
</body>
</html>

результат операции:

⚠️ Обратите внимание, что метод «абсолютное позиционирование + отрицательный запас» не подходит для относительных единиц, таких как процент ширины и процент высоты, вместо этого используются конкретные значения.

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

Абсолютное позиционирование + перевод

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

绝对定位 + 平移да绝对定位 + 负边距Улучшенная версия, то какие конкретно улучшения? Процент отрицательного поля не относится к самому себе, а относится к родительскому элементу, поэтому недостаточно умно записывать конкретные значения пикселей.

И перевод относителен сам по себе, просто не надо мозгов писать-50%Просто сделай это:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }

    /* 令html和body全屏显示, 并有一个灰色背景 */
    html, body { height: 100%; background: gray; }

    /* 先在父元素上设置相对定位 */
    body { position: relative }

    .center {
      /* 绝对定位 */
      position: absolute;

      /* 上方和左方为50% */
      top: 50%;
      left: 50%;

      /* 不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 */
      padding: 10px;

      /* 这个50%是相对于自身宽高而言的 */
      transform: translate(-50%, -50%);

      /* 白色背景 */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center">
    用内容撑开盒子
  </div>
</body>
</html>

результат операции:

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

Реализация сетки

Возможно, вы слышали более или менееGridИмя его, люди, которые имеют глубокое понимание этого, сочтут его очень мощным, но у людей, которые не имели глубокого понимания этого, может сложиться следующее впечатление:兼容性不好

Но со временем, если вы не рассматриваете особенно низкоуровневые мобильные телефоны с мобильной стороны, вы можете в основном использовать их.

Даже если тыGridМне не интересно, я думаю, что это используется на мобильных устройствахFlexдостаточно. Не нужно много усилий, чтобы запомнить его простейшее употребление. Потому что, в конце концов, если вы сможете написать интервьюеру о новейших технологиях, интервьюер будет впечатлен вами:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }

    /* 令html和body全屏显示, 并有一个灰色背景 */
    html, body { height: 100%; background: gray; }

    /* 中央盒子的直接父元素 */
    body {
      /* 令其变成网格布局 */
      display: grid;

      /* 令其子元素居中 */
      place-items: center;
    }

    .center {
	  /* 不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 */
      padding: 10px;
      
      /* 白色背景 */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center">用内容撑开盒子</div>
</body>
</html>

результат операции:На самом деле код ключа очень простой, и особых затрат на обучение почти нет, всего две строчки:

/* 令其变成网格布局 */
display: grid;

/* 令其子元素居中 */
place-items: center;

Флекс Флекс Коробка

Король мобильной раскладки Flex:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }

    /* 令html和body全屏显示, 并有一个灰色背景 */
    html, body { height: 100%; background: gray; }

    /* 找到中央盒子的直接父元素 */
    body {
      /* 令其变成弹性布局 */
      display: flex;
    }

    .center {
      /* 自动外边距 */
      margin: auto;

      /* 白色背景 */
      background: white;

      /* 不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 */
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="center">用内容撑开盒子</div>
</body>
</html>

результат операции:Сгибать почти невозможно, верно? Он очень прост в использовании, прост, доступен и удобен. Если вы не можете этого сделать, вы можете зайти в блог Учителя Жуань Ифэн, в котором есть очень подробное вводное руководство:

Кроме того, блог Чжан Синьсюй тоже очень хорош:

макет таблицы

В случае с центрированной компоновкой также очень подходит табличная компоновка:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }

    body {
      /* 令body全屏显示 */
      width: 100vw;
      height: 100vh;

      /* 显示为表格的格子 */
      display: table-cell;

      /* 水平居中 */
      text-align: center;

      /* 垂直居中 */
      vertical-align: middle;

      /* 灰色背景 */
      background: gray;
    }

    .center {
      /* 显示为行内块元素 */
      display: inline-block;

      /* 不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 */
      padding: 10px;

      /* 白色背景 */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center">用内容撑开盒子</div>
</body>
</html>

результат операции:Ключевыми моментами этого макета являются:

  • 3 настройки стиля для родительского элемента:

    • display: table-cell;
    • text-align: center;
    • vertical-align: center;

  • Установить на дочерние элементы:

    • display: inline-block;

Эпилог

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

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

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

Эта статья была впервые опубликована в前端学不动Нет публики

Кстати, эта статья находится в сериальном виде, и верстка по центру — это только начало,点赞 + 关注До встречи на следующем макете!

Замечательные статьи в прошлом

Категории