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

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

предисловие

Многие люди говорят об адаптации мобильного терминала в состоянии замешательства, и они хотят вдохнуть аромат. Мобильный терминал надо адаптировать, прямо px прописан насмерть, а другие адаптации не доделаны? Не совсем, компании со строгими требованиями потребуют точно такого же масштабирования, что просто означает, что каждая строка имеет одинаковое количество слов на каждом телефоне. Далее мы подробно поговорим о прошлом и настоящем адаптации мобильных терминалов.

1. Зачем нужно адаптироваться к мобильному терминалу?

В общем, дизайнер проектирует проекты в соответствии с размером 375. Однако в нынешнюю эпоху быстрого обновления мобильных терминалов (то есть мобильных телефонов) каждая марка мобильного телефона имеет разные физические разрешения, что приведет к к каждому устройству.Логическое разрешение 357 также отличается.В настоящее время, если вы хотите восстановить проект проекта 357, это в принципе невозможно, потому что если есть левая и правая раскладка, если левая сторона написана мертвый, а правая сторона адаптивная, будет отображаться дисплей с правой стороны каждого устройства.Размер контента различается, и это особенно важно для мобильной адаптации.

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

Ниже мы разберем один за другим

Размер экрана

Размер экрана измеряется длиной диагонали экрана, измеряемой в дюймах.

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

пиксель

Мы видим, что 320x480 на картинке выше называется разрешением, и это так называемое разрешение, если говорить прямо, состоит из 320 пикселей по горизонтали и 480 пикселей по вертикали.

Что такое пиксель?

Пиксель (Pel, пиксель; элемент изображения) — наименьшая единица изображения, определяющая всю яркость и цветность изображения. Изображение телевизора состоит из пикселей с разной яркостью, расположенных через определенный интервал. С точки зрения компьютерных технологий пиксель — это наименьшая единица, которой можно управлять с помощью аппаратного и программного обеспечения. Это относится к наименьшей единице, отображаемой на экране дисплея, а не к самой маленькой единице на изображении. Изображение обычно содержит тысячи пикселей, каждый из которых имеет свою собственную информацию о цвете, которые тесно сгруппированы. Из-за иллюзии человеческого глаза эти сгруппированные пиксели воспринимаются как целостное изображение. Когда вы изменяете область изображения, вы фактически изменяете пиксели в этой области. Насколько хороши или плохи эти модификации пикселей, будет определять качество окончательного изображения. Чем больше пикселей на единицу площади, тем лучше будет выглядеть изображение. Цветные телевизионные изображения состоят из тысяч пикселей, и каждый пиксель состоит из трех цветов: красного, зеленого и синего, расположенных рядом друг с другом. (Обратите внимание, что размер каждого пикселя не фиксирован, он определяется в соответствии с разрешением устройства, баллами знаний, которые будут проверены позже)

Что такое разрешение?

Разрешение экрана относится к количеству пикселей по вертикали и горизонтали, а единицей измерения является px. Разрешение экрана Параметр, определяющий, сколько информации отображается на экране компьютера, измеряется в пикселях по горизонтали и вертикали. Для экрана того же размера, когда разрешение экрана низкое (например, 640 x 480), на экране отображается меньше пикселей, а размер отдельных пикселей больше. При высоком разрешении экрана (например, 1600 x 1200) на экране отображается много пикселей, а размер одного пикселя относительно мал.

Узнав, что такое разрешение, некоторые удивятся, я помню, что разрешение Apple 6 на официальном сайте Apple составляет 750x1334, но разрешение Apple 6 на дизайн-проекте 375x667, и разрешение каждого устройства выше чем Реальное разрешение намного меньше, что связано с некоторыми историческими причинами.

Физическое разрешение устройства (пиксели устройства)

Я считаю, что все наши фронтенд-разработчики были свидетелями процесса разработки мобильных телефонов. От мобильных телефонов с голубым экраном к мобильным телефонам с цветным экраном, к мобильным телефонам с сенсорным экраном, разработанным Nokia, а затем к смартфонам наши руки становятся все четче и больше, поэтому наши экраны развиваются все быстрее и быстрее.

На изображении выше хорошо видна разница, вызванная разными разрешениями.

От оригинального довольно зернистого экрана до 720p до 1080p и даже 2k-экранов флагманских телефонов теперь наши физические разрешения становятся все больше. Это обнажает проблему.Если мы удвоим разрешение мобильного телефона, наши изображения не будут удваиваться.Неужели мы должны создавать эскиз дизайна на каждом устройстве, и разрешение каждого устройства не то же самое?На самом деле вопрос о чем вы беспокоитесь, много лет назад думал лидер нашей банды Цяо. Это наше логическое решение

Логическое разрешение (независимые от устройства пиксели)

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

Джобс впервые предложил концепцию Retina Display (экрана сетчатки) при запуске iPhone 4. В экране сетчатки, используемом iPhone 4, 2x2 пикселя используются как 1 пиксель, что делает экран более тонким, но размер элементов недостаточно. не изменится. С тех пор устройства с высоким разрешением имеют на один логический пиксель больше. Хотя разница между логическими пикселями этих устройств не очень велика, все же есть небольшая разница, поэтому рождается проблема, что мобильные страницы должны быть адаптированы.Поскольку логические пиксели являются производными от физических пикселей, они будут иметь соотношение пикселей .

соотношение пикселей устройства

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

проблема с границей 1px

Когда мы пишем 1px в css, потому что это логический пиксель, наш логический пиксель сопоставляется с устройством в соответствии с соотношением пикселей устройства (dpr) и составляет 2px или 3px, потому что размер экрана каждого устройства разный. приводит к разному размеру каждого физического пикселя (помните приведенный выше пункт знаний, размер пикселя устройства не является фиксированным), поэтому на устройстве с относительно большим размером рендеринг в 1px выглядит довольно грубо, это классический однопиксельный пограничная проблема

Как решить

Основная идеяВ Интернете браузер предоставляет нам window.devicePixelRatio, чтобы помочь нам получить dpr. В css медиа-запрос min-device-pixel-ratio можно использовать для дифференциации dpr:Мы используем это соотношение пикселей для расчета соответствующего размера, но оно выявляет очень большую проблему совместимости.

Среди них Chrome округляет 0,5 пикселя до 1 пикселя, а firefox/safari может отображать границу в полпикселя, а Chrome будет рассматривать менее 0,5 пикселя как 0, в то время как Firefox будет рассматривать не менее 0,55 пикселя как 1 пиксель, Safari не менее 0,55px.Если он меньше 0,75px, он считается за 1px.Дальнейшее наблюдение на мобильном телефоне Chrome iOS нарисует сторону 0,5px, но родной браузер Android (5.0) не будет работать. Таким образом, установка 0,5px напрямую сильно различается в разных браузерах, и мы видим, что разные браузеры в разных системах по-разному обрабатывают px десятичной точки. Поэтому, если мы установим единицу измерения в десятичных пикселях, включая ширину и высоту, это не очень надежно, потому что разные браузеры ведут себя по-разному.

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

преобразование: масштаб (0,5) схема

div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}

CSS-решение, основанное на медиа-запросе соотношения пикселей устройства

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

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

Как адаптировать

viewport

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

Так как же настроить область просмотра на мобильной стороне? Подойдет простой метатег!

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

Что они имеют в виду?

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

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

Таким образом, приведенная выше мета-настройка является нашей идеальной настройкой, она предусматривает, что ширина нашего окна просмотра равна ширине экрана, а начальный коэффициент масштабирования равен 1, то есть наш визуальный экран просмотра является идеальным окном просмотра в начале!

Если для масштабируемости пользователя установлено значение «нет», это может решить проблему задержки мобильных событий кликов.(расширять)

Решение для адаптации

1. рем-адаптация

rem — это новая относительная единица в CSS3, которая привлекла большое внимание. В чем разница между этим блоком и em? Разница в том, что когда вы используете rem для установки размера шрифта для элемента, это все еще относительный размер, но только относительно корневого элемента HTML. Можно сказать, что этот блок сочетает в себе преимущества относительного размера и абсолютного размера, он может не только регулировать размер всех шрифтов пропорционально, изменяя корневой элемент, но и избегать цепной реакции соединения размера шрифта слой за слоем. В настоящее время rem поддерживается во всех браузерах, кроме IE8 и более ранних версий. Для браузеров, которые его не поддерживают, решение тоже очень простое — написать дополнительную инструкцию абсолютных единиц. Эти браузеры игнорируют размер шрифта, установленный с помощью rem

Например:

//假设我给根元素的大小设置为14px
html{
    font-size：14px
}
//那么我底下的p标签如果想要也是14像素
p{
    font-size:1rem
}
//如此即可

Макет rem следует упомянуть гибкий.Гибкое решение является ранним решением для адаптации мобильного терминала с открытым исходным кодом Alibaba.После ссылки на гибкий, мы используем rem для единообразного макета на странице.

Его принцип очень прост

// set 1rem = viewWidth / 10
function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
}
setRemUnit();

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

Таким образом, нам нужно только преобразовать px проекта дизайна в соответствующую единицу rem.

Конечно, этот план - только переходный план, почему же он - переходный план?

Поскольку у окна просмотра все еще есть проблемы с совместимостью на устройствах Android с более низкими версиями, а vw и vh еще не достигли совместимости со всеми браузерами, гибкая схема использует rem для имитации vmin для достижения «универсальной» схемы пропорционального масштабирования на разных устройствах. является общим решением, потому что его решение состоит в том, чтобы судить о размере отображаемого пространства страницы в соответствии с размером устройства, то есть размером экрана, а затем восстанавливать проект дизайна на 100% в соответствии с размером экрана. , чтобы эффект (диапазон отображения), который люди могли видеть, был одинаковым, таким образом, если вы восстанавливаете экраны iPhone 5 и Apple 6p в соответствии с проектом дизайна, размер шрифта на самом деле отличается, и размер, который люди хотят видеть на одинаковом расстоянии на самом деле одно и то же, в сущности,Пользователи используют большие экраны, чтобы видеть больше контента, а не крупный текст..

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

2, vw, vh макет

Схемы vh и vw делят ширину визуального окна просмотра window.innerWidth и высоту визуального окна просмотра window.innerHeight на 100 равных частей.

Схемы vh и vw аналогичны rem, и сделать преобразование единиц достаточно хлопотно, а преобразование px в vw может быть не полностью делимым, поэтому есть некоторая разница в пикселях.

Однако в современных разработках webpack использует postcss-loader при разборе CSS, существует postcss-px-to-viewport, который может автоматически конвертировать px в vw.

{
    loader: 'postcss-loader',
    options: {
    	plugins: ()=>[
        	require('autoprefixer')({
        		browsers: ['last 5 versions']
        	}),
        	require('postcss-px-to-viewport')({
        		viewportWidth: 375, //视口宽度（数字)
        		viewportHeight: 1334, //视口高度（数字）
        		unitPrecision: 3, //设置的保留小数位数（数字）
        		viewportUnit: 'vw', //设置要转换的单位（字符串）
        		selectorBlackList: ['.ignore', '.hairlines'], //不需要进行转换的类名（数组）
                minPixelValue: 1, //设置要替换的最小像素值（数字）
                mediaQuery: false //允许在媒体查询中转换px（true/false）
        	})
    	]
}

3. px основной, vx и vxxx (vw/vh/vmax/vmin) дополняются, с некоторым флексом (рекомендуется)

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

1. Для того, чтобы лениться, не желая делать адаптацию каждого мобильного телефона

2. Не желая изучать новые методы компоновки, позвольте продвинутым макетам, таким как flex, пройти мимо вас.

Процесс адаптации мобильного терминала

1. Установите область просмотра width=device-width в голове‘

2. Используйте px в css

3. Используйте гибкий макет в соответствующих сценариях или адаптируйте его с помощью vw

4. Используйте медиа-запросы для разных типов устройств (ПК телефон планшет)

5. Рассмотрите возможность отдельной разработки проекта, если взаимодействие между типами устройств слишком отличается

напиши в конце

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

Езда по жаре:Анализ глубины гибкости - решите проблему адаптации мобильного терминала!Только что вышел, спасибо

Еще есть жара:Возьмите вас, чтобы раскрыть тайну WebSocket!, Ну давай же

Категории