5 решений для адаптации мобильного терминала

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

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

Цель мобильной адаптации

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

Узнать о видовых экранах

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

  • Область просмотра макета: в области макета CSS окна браузера ширина области просмотра макета ограничивает ширину макета CSS. Чтобы веб-сайты, предназначенные для браузеров ПК, нормально отображались на мобильных устройствах, браузеры на мобильных устройствах установят для области просмотра по умолчанию значение 980 пикселей или другие значения, которые, как правило, намного больше, чем видимая область мобильных браузеров. горизонтальная полоса прокрутки в браузере.

  • Визуальное окно: область, в которой терминальное устройство отображает веб-страницу.

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

вид макета

Если ширина окна не установлена ​​на мобильном терминале, ширина страницы по умолчанию равна 980 пикселей, и страницу можно прокручивать влево и вправо.

визуальное окно

идеальное окно

Ширина страницы равна ширине области просмотра, и на странице нет горизонтальной полосы прокрутки.

подробные настройки области просмотра

установивviewportРазмер страницы можно установитьmetaМетки могут быть установленыviewportинформация, код выглядит следующим образом:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-sacle=1, maximum-scale=1" >

viewportЕго необходимо использовать со следующими свойствами:

Атрибуты имея в виду стоимость
width Определяет ширину области просмотра в пикселях. положительное целое число или ширина устройства ширина устройства
height Определяет высоту области просмотра в пикселях. положительное целое число или высота устройства
initial-scale Первоначальное определение значения масштабирования страницы Целочисленные или десятичные десятичные десятичные десятичные показатели уменьшаются, и наоборот Увеличить
maximum-scale определить максимальный масштаб Целое или десятичное
minimum-scale Определить минимум масштабирования Целое или десятичное
user-scalable Определяет, может ли пользователь масштабировать yes/no

Схема адаптации

После установки ширины страницы на заданную ширину окна можно выполнить работу по мобильной адаптации.

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

1. рем макет

remэто новая относительная единица в CSS3, которая начинается сHTMLэлементальfont-sizeмасштабировать:

/* 设置html元素的字体大小为 16px，即 1rem = 16px */
html {
    font-size: 16px;
}
/* 设置box元素宽 160px，10rem = 160px */
.box {
    width: 10rem; /* 160px */
}

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

Возьмем в качестве примера эскиз дизайна шириной 750 пикселей, есть два элемента, один элемент занимает 550 пикселей, а другой занимает 750 пикселей:

// ...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="w-550px"></div>
<div class="full"></div>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .w-550px {
        width: 550rem;
        height: 100px;
        background-color: rgb(209, 255, 240);
    }
    .full {
        width: 750rem;
        height: 100px;
        background-color: rgb(195, 200, 199);
    }
</style>
<script>
    function setRem() {
        // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改
        const scale = document.documentElement.clientWidth / 750;
        document.documentElement.style.fontSize = scale + 'px';
    }
    setRem();
    window.onresize = setRem;
</script>

Когда страница растягивается, макет веб-страницы также растягивается. Результаты приведены ниже:

В настоящее время rem поддерживается во всех браузерах, кроме IE8 и более ранних версий.

1.1 Создание проекта с помощью postcss-pxtorem

  1. Создайте проект с vue-cli
vue create rem-demo
  1. установить область просмотра
<!-- rem-demo/public/index.html -->
<!-- 框架已经帮我们设置了，这里可以忽略 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
  1. Динамически установить значение rem

Создайте файл rem.js:

// rem-demo/util/rem.js
// 设置基准大小
const baseSize = 32
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例
  const scale = document.documentElement.clientWidth / 750
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
window.onresize = function () {
  setRem()
}

Импортируйте файл rem.js:

// rem-demo/src/main.js
import './utils/rem'
  1. Установите и используйте postcss-pxtorem

Установите postcss-pxtorem

yarn add postcss-pxtorem --dev
npm i postcss-pxtorem --save-dev

Используйте postcss-pxtorem

// rem-demo/vue.config.js
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue : 16, //（数字，函数） 根元素字体大小
            unitPrecision: 5, //（数字）允许REM单位增长的十进制数字
            replace: true, // （布尔值）替换包含rems的规则，而不添加后备
            mediaQuery: false, // （布尔值）允许在媒体查询中转换px
            minPixelValue: 0, // （数字）设置要替换的最小像素值
            selectorBlackList  : [], // 忽略转换正则匹配项
            propList   : ['*'], // 可以从px转换为rem的属性，匹配正则
            exclude: /node_modules/i // （字符串，正则表达式，函数）要忽略并保留为px的文件路径
          }),
        ]
      }
    }
  }
}
  1. результат операции

Например: эскиз дизайна 750*1136, нам нужна ширина блока 375px:

/* 按照设计稿的宽度编写 */
.box {
  width: 375px;
  height: 400px;
  background-color: rgb(202, 246, 232);
}

/* 转换后 */
.box {
    width: 23.4375rem;
    height: 25rem;
    background-color: #caf6e8;
}

/* 使用 Px 和 PX 作为单位，pxtorem 将不进行转换 */

1.2 Резюме

Преимущества: макет rem может хорошо заполнять экран по горизонтали на экранах разных размеров, а соотношение размеров элементов на разных экранах постоянно

Недостаток: на устройствах с большим экраном (Pad) размер элемента будет большим, и на странице будет отображаться меньше контента.

Улучшения для больших экранов:

  1. ограничить максимальное значение rem,
  2. С помощью медиа-запросов ограничьте максимальную ширину контента, например:Tencent.com,Личи FM

Решение rem для мобильных браузеров является основным решением для адаптации к мобильным устройствам. Другое название этого решения — гибкое решение. Благодаря динамической настройке rem эффект отображения интерфейса согласуется на устройствах разного размера.

существуетlib-flexibleКарри говорит следующее:

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

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

2. макет vw/vh

Схема vw/vh похожа на схему rem тем, что она делит страницу на части, но vw/vh делит страницу на 100 частей, 1vw = ширина устройства/100

2.1 Создание проекта с помощью postcss-px-to-viewport

  1. Создайте проект с vue-cli
vue create vw-demo
  1. установить область просмотра
<!-- rem-demo/public/index.html -->
<!-- 框架已经帮我们设置了，这里可以忽略 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
  1. Установите и используйте postcss-px-to-viewport

Установите postcss-px-to-viewport

yarn add postcss-px-to-viewport --dev
npm i postcss-px-to-viewport --save-dev

настроить .postcssrc.js

module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ['wrap'], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false, // 是否处理横屏情况
    },
  },
};
  1. результат операции

Взяв в качестве примера проект дизайна 750*1136, создайте коробку шириной 375 пикселей.

.test-vw {
  width: 375px;
  height: 100px;
  font-size: 40px;
  text-align: center;
  line-height: 100px;
  background: #13b5b1;
}

/* 转换后 */
.test-vw {
    width: 50vw;
    height: 13.333333vw;
    font-size: 5.333333vw;
    text-align: center;
    line-height: 13.333333vw;
    background: #13b5b1;
}

текущий результат:

2.2 Резюме

Преимущества: макеты vw и vh могут быть хорошо реализованы для заполнения экрана по горизонтали на экранах разных размеров.postcss-px-to-viewportЭто может очень хорошо помочь нам с преобразованием единиц измерения.

недостаток:

  • Значение vw/vh не может быть изменено, элемент будет увеличен на устройствах с большим экраном (Pad) и не может быть изменен через js.
  • Совместимость - поддерживает большинство браузеров, ie11 не поддерживает, несколько мобильных телефонов с низкими версиями ios8, android4.4 и ниже не поддерживают

3. Процентная раскладка

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

Кейс: Проект дизайна 750*1136, нам нужна коробка шириной 200px

.box {
  /* w = 200 / (750/100) = 26.66667 */
  /* 可知，计算复杂，且会存在误差 */
  width: 26.6%;
}

Расширение:дочерний элементwidthа такжеheightОбъект процентной ссылки является родительским элементомwidthа такжеheight,margin,paddingСсылочный объект является родительским элементомwidth,border-radius,background-size,transform: translate(),transform-originСсылочный объект имеет собственную ширину и высоту

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

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

Подробное объяснение свойств запроса CSS3 @media

Случаи запроса СМИ:

body {
  background-color: yellow;
}
/* 针对大屏产品 ipad pro */
@media screen and (min-width: 1024px) {
    body {
      background-color: blue;
    }
}

5. на основе px, с vw/vh, медиа-запросами и flex для макета

Сначала проверьте результаты текущей адаптации мобильных терминалов для основных веб-сайтов:

Адаптивность к маленькому экрану, ограничение максимальной ширины:Tencent.com,Личи FM

Макет имеет фиксированную высоту и адаптивную ширину:Таобао,Байду,NetEase

Целью мобильной адаптации является:Пусть терминальные устройства с разными размерами экрана будут иметь согласованный интерфейс пользовательского интерфейса, а терминалы с большими экранами смогут отображать больше контента., то макет с фиксированной высотой и адаптивной шириной подходит для веб-страниц с большим количеством текста (Байду,NetEase) лучше, для больших экранов,Tencent.comа такжеЛичи FMПодход заключается в том, чтобы ограничить максимальную ширину, чтобы сделать большой экран более удобным.

С точки зрения написания страницы, страница больше связана с текстом и макетом. Что касается текста, мы должны использоватьpxВ качестве единицы, чтобы отображать больше контента на устройствах с большим экраном вместо более крупного текста; для макета мы можем использоватьflexРеализовать гибкую компоновку. При реализации определенных элементов ширины и высоты вы можете использовать vw/vh соответствующим образом. При использовании vw/vh для конкретных значений вычисления сложны или есть ошибки, вы также можете использовать rem

Процесс адаптации

  1. записывать<meta>Настройки ярлыкаviewportСодержаниеwidth=device-width, делая ширину страницы равной ширине области просмотра
  2. использовать px в css
  3. Используйте гибкий макет в соответствующих сценариях или адаптируйте его с помощью vw
  4. Используйте медиа-запросы для разных типов устройств (ПК телефон планшет)
  5. В случаях, когда взаимодействие между типами устройств слишком сильно различается, рассмотрите возможность разработки отдельного проекта.

Суммировать

Вышеприведенное кратко описывает 5 видов решений для адаптации мобильных терминалов.

В настоящее время наиболее популярным по-прежнему является макет первого rem, который может быть хорошо разработан в соответствии с дизайн-проектом, с медиа-запросами он может очень хорошо решить проблему большого экрана, например:Tencent.com,Личи FM

Что касается второй схемы компоновки vw/vh, я видел довольно много статей, рекомендующих ее, потому что она фактически не практиковалась в проекте, потому что мы не можем вмешиваться.vw/vhЦенность, опыт на большом экране не должен быть очень хорошим, поэтому я не могу сделать суждение

О пятомpxосновной, матчvw/vh, запросы СМИ иflexМакет, я лично думаю, что некоторые места можно ввестиrem, также может быть разработан в соответствии с проектом дизайна и может решить проблему большого экрана, вы можете обратиться к:Таобао,Байду,NetEase

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

Выше вся эта статья, пожалуйста, поправьте меня, если я ошибаюсь

Ссылаться на

Интервьюер: Вы знаете об адаптации мобильного терминала?

Давайте начнем занятие - проясните один раз, не спрашивайте, как адаптироваться к мобильному терминалу в будущем!

мобильная адаптация вьюпорта

Vue-cli3.0 px преобразуется в rem для полной адаптации h5

Принцип и схема адаптивной верстки фронтенда (подробная версия)

Категории