Я видел много соответствующей информации в Интернете, и все они говорят о схеме адаптации Taobao и схеме адаптации Netease. Я говорил о многих понятиях, таких как dpr, meta и т. д. Честно говоря, я чувствую, что написание очень сложное, и оно отличается от того, что я думаю. Всегда хочется найти отправную точку для дизайна этой штуки, но не нашел в этих статьях. Прочитав код некоторых популярных веб-сайтов, я почувствовал, что у меня есть небольшой опыт, поэтому я поделюсь им с вами, надеюсь, он вам немного поможет.
Подготовить
Поскольку это адаптация, у нас в начале должен быть эталонный экран, здесь мы сначала заранее подтверждаем, что все следующие примеры основаны на экране iphone6 (ширина375px) для справки. Обычно эскиз дизайна в 2 раза больше эскиза дизайна, поэтому окончательная ширина эскиза, который мы получили, равна750px.
экранизация
Конечная цель или суть экранизации состоит в том, чтобы достичьПропорциональное масштабирование.
Несмотря на то, что планы крупных веб-сайтов теперь другие, шаги и цели на самом деле одинаковы, они в основном делятся на следующие шаги:
- Найдите тест, который зависит от ширины экрана
- Определить значение эталона
- Пишем наши стили на основе значения базы
Зачем нужен эталон? Поскольку мы не хотим писать стиль макета для каждого экрана, нам нужен бенчмарк, который будет меняться в зависимости от ширины экрана.Нам нужно только определить наше значение css в соответствии с бенчмарком, и мы сможем адаптироваться ко всем экранам.
Все дело в адаптации, давайте посмотрим, какие решения можно использовать на этих этапах.
Что такое эталон? Чтобы упростить тест, мы рассматриваем его как единицу, поэтому нам нужно найти единицу, которую можно изменить.Подумайте, какие единицы в CSS можно изменить?remОн определяет собственное значение на основе допустимого размера корневого шрифта. Таким образом, мы можем изменить корневой шрифт при изменении экрана, мы напрямую используемremМакет его.
Следующим шагом является определение базового значения, в нашем случае значения корневого шрифта. Для облегчения нашего расчета мы можем установить значение, которое легко вычислить.Например, мы можем сделать эскиз проекта в1rem=100px, то записывается как
// 屏幕宽度 / 7.5 = 1rem
// 或
// 100vw / 7.5 = 1rem
В этом примере они одинаковы, а затем, когда мы пишем стиль, мы используемremЕго можно использовать как единицу.Например, есть ширина80pxизdivэлемент, нам просто нужно написать:
div {
width: .8rem;
}
Если вам по-прежнему сложно каждый раз выполнять вычисления вручную, вы можете использовать примеси в препроцессорах текущего стиля (например, less, sass), чтобы помочь вам, или использовать js для динамических вычислений.
На этом наша адаптация закончена. Вы можете спросить, почему вы не видите заголовки dpr и meta для установки ширины просмотра, я четко вижу эти понятия во многих статьях. Не волнуйтесь, на самом деле все это для решения проблемы, давайте поговорим об этой проблеме.
hairline
hairlineЧто это такое? Hairline на самом деле очень тонкая нить, многие дизайнеры любят использовать эту нить, что делает наш передок большим🙄. Используйте эту строку напрямую0.5pxOK? Это не работало на некоторых старых экранах и было автоматически исправлено на1px,мы все знаем.
Однако многие современные мобильные телефоны имеют экраны с большим увеличением, то есть пиксель CSS будет иметь несколько физических пикселей, чтобы отображаемое изображение было более тонким и четким, а некоторые уже поддерживают CSS для использования десятичных знаков.В этом случае мы можем непосредственно использовать0.5pxписать линии этой ширины. Здесь есть понятие, называется количество физических пикселей и css пикселей设备像素比, что мы часто называем dpr
物理像素数 / css像素数 = dpr
dprЗначение может быть передано черезwindow.devicePixelRadioчтобы получить.
Кажется, проблема решена. Но очень важной частью нашей работы над интерфейсом является совместимость.Что, если мы столкнемся с чем-то, что не поддерживает это десятичное написание CSS? Мы думаем об очень общем решении, которое масштабируется, например, мы кладем1pxШирину линии можно уменьшить вдвое0.5pxширина линии.
для всех нас1pxШирина уменьшена до одного физического пикселя, нам нужно сделать ширину страницы как屏幕css宽度 * dpr. Затем пишем под этой шириной1pxширину линии, а затем уменьшить ее в концеdprраз мы можем получить 1 физическую ширину пикселя.
Для того, чтобы страница стала屏幕css宽度 * dprДля широкой цели нам нужно пропорционально изменить нашу схему адаптации выше.
если сейчасdpr=3, нам нужно сделать ширину страницы 375 * 3 = 1125, а черновик нашего дизайна 750. нам нужно, чтобы наше базовое значение изменялось пропорционально
// 屏幕宽度 / 7.5 => 屏幕宽度 / 7.5 / 2 * 3
Теперь мы получаем размеры как屏幕css宽度 * dprДля того, чтобы страница полностью отображалась на экране, нам необходимо установить метазаголовок в html (если вы этого не знаете, проверьте сами, информации много)
<meta name="viewport" content="width=屏幕css宽度 * dpr">
Затем уменьшите время dpr, чтобы стать
<meta name="viewport" content="width=屏幕css宽度 * dpr,initial-scale=1/dpr,minimum-scale=1/dpr,maximum-scale=1/dpr,user-scalable=no">
На этом мы закончили говорить обо всем, надеюсь, вы поняли, почему существует так много адаптационных схем с разными стилями написания, и все они достигают одной цели.
мыслительные вопросы
Наконец, некоторые коды от Taobao и NetEase прилагаются, вы можете напрямую перейти на их сайт, чтобы найти эти коды. Вы должны иметь возможность анализировать их решения на основе этих кодов, они оставлены для вашего собственного мышления и анализа.
Мобильный ТаобаоЧасть кода адаптации
! function (e, t) {
var n = t.documentElement,
d = e.devicePixelRatio || 1;
function i() {
var e = n.clientWidth / 3.75;
n.style.fontSize = e + "px"
}
if (function e() {
t.body ? t.body.style.fontSize = "16px" : t.addEventListener("DOMContentLoaded", e)
}(), i(), e.addEventListener("resize", i), e.addEventListener("pageshow", function (e) {
e.persisted && i()
}), 2 <= d) {
var o = t.createElement("body"),
a = t.createElement("div");
a.style.border = ".5px solid transparent", o.appendChild(a), n.appendChild(o), 1 === a.offsetHeight && n.classList.add("hairlines"), n.removeChild(o)
}
}(window, document)
Мобильные новости NetEaseЧасть кода адаптации
html {
font-size: 13.33333vw
}
@media screen and (max-width: 320px) {
html {
font-size:42.667px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 321px) and (max-width:360px) {
html {
font-size:48px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 361px) and (max-width:375px) {
html {
font-size:50px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 376px) and (max-width:393px) {
html {
font-size:52.4px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 394px) and (max-width:412px) {
html {
font-size:54.93px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 413px) and (max-width:414px) {
html {
font-size:55.2px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 415px) and (max-width:480px) {
html {
font-size:64px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 481px) and (max-width:540px) {
html {
font-size:72px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 541px) and (max-width:640px) {
html {
font-size:85.33px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 641px) and (max-width:720px) {
html {
font-size:96px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 721px) and (max-width:768px) {
html {
font-size:102.4px;
font-size: 13.33333vw
}
}
@media screen and (min-width: 769px) {
html {
font-size:102.4px;
font-size: 13.33333vw
}
}
Оригинальный текст этой статьи обновлен на моем github, вотОригинальная ссылка. Если в статье есть ошибки или неточности, просьба указать на них, большое спасибо!