Используйте vw+rem для реализации макета мобильной веб-адаптации.

CSS

основная концепция

1 единица

Px(CSS pixels)

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

em

  • 1em — это тот же размер шрифта, что и у текущего элемента (точнее, ширина заглавной буквы M). До применения стилей CSS базовый размер шрифта по умолчанию, установленный браузерами для веб-страниц, составляет 16 пикселей, что означает, что вычисленное значение 1em для элемента по умолчанию равно 16 пикселям. Но будьте осторожны — единица em наследуется от размера шрифта родительского элемента, поэтому, если вы установите другой размер шрифта для родительского элемента, значение em в пикселях может усложниться. Пока не беспокойтесь об этом слишком сильно, мы более подробно рассмотрим настройки наследования и размера шрифта в следующих статьях и модулях. em — наиболее часто используемая относительная единица в веб-разработке.

ex, ch

  • высота строчной буквы x и ширина цифры 0 соответственно. Они не так широко используются или хорошо поддерживаются, как em.

rem

  • REM (root em) работает так же, как em, но всегда равен размеру базового размера шрифта по умолчанию; унаследованные размеры шрифта не будут работать, так что это звучит как лучший выбор, чем em, хотя в более старых версиях не поддерживается на версию IE см. о поддержке кроссбраузерностиDebugging CSS.)

vw,vh

  • Это 1/100 ширины области просмотра и 1/100 высоты области просмотра соответственно, а во-вторых, он не так широко поддерживается, как rem. И вмин, вмакс...

процент

2. Сравнение совместимости rem и vw

  • rem

    rem

  • vw

    vm

3. О window.devicePixelRatio

mdn

  • Это свойство возвращает отношение физического разрешения в пикселях текущего устройства отображения к разрешению в пикселях CSS. Это значение также можно интерпретировать как отношение размера пикселя: отношение размера пикселя CSS к размеру физического пикселя.

Так что же такое физические пиксели устройства?

  • Физический пиксель: наименьшая единица отображения, которой может управлять устройство. Аппаратно-независимый пиксель (DIP, аппаратно-независимый пиксель, независимый от плотности пиксель): независимая от устройства единица для логического измерения пикселей.

  • Для фронтенда это можно понимать как минимальное значение, которое можно установить на устройстве. Например, dpr = 1 минимум 1 пиксель; dpr = 2 минимум 0,5 пикселя.

PPI (пиксель на дюйм)

  • Сколько пикселей на дюйм (пикселей устройства), чем выше PPI, тем лучше качество изображения.

формула

// w: 横向pixel
// h: 纵向pixel
// inch: 屏幕尺寸
PPI = Math.sqrt(w * w + h * h) / inch

console.log(Math.ceil(Math.sqrt(1920 * 1920 + 1080 * 1080) / 5.5))
// 然而我并不明白怎么要这样算 不是应该是 w * h / inch ？？？？？

Retina Display

ЖК-экран с плотностью пикселей, достаточно высокой, чтобы человеческий глаз не мог различить отдельные пиксели.

3. На заметку по мобильной адаптации

  1. Проблемы адаптации с разными размерами экрана

    • Это можно решить с помощью vw

  2. проблема с размытием изображения

    • Для обеспечения четкости можно использовать тройное изображение.Для разработки и отображения скомпрометированных результатов рекомендуется использовать формат двойного изображения + webp.

  3. проблема с отображением 1px

    • много способов

  4. Проблемы совместимости, не поддерживаемые API

    • Совместимость не поддерживается vw

  5. HD-дисплей

    • Влияет ли это на производительность рендеринга? ? Быть сертифицированным
    • Может ли масштабирование сделать веб-страницы более качественными?

  1. Проблемы совместимости сторонних библиотек компонентов
  2. проблема с отображением расширенного текста
  3. Проблема несогласованности единицы переноса внешнего кода

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

1. Классическое решение flexble.js

Существует проблема

  • 1. проблема с iframe
  • 2. Проблема с форматированным текстом
// vue指令
// 1. 先获取dpr 2获取每个文档对象的字体大小 乘以dpr
Vue.directive('richtext', (el, binding) => {
    Vue.nextTick(() => {
        let dpr = document.querySelector('html').getAttribute('data-dpr')
        let f = (dom) => {
            let fontPx = dom.style && dom.style.fontSize
            if (fontPx) {
                fontPx = fontPx.substr(0, fontPx.length - 2) * parseInt(dpr)
                dom.style.fontSize = fontPx + 'px'
            }
            if (dom.childNodes.length > 0) {
                for (let i = 0; i < dom.childNodes.length; i++) {
                    f(dom.childNodes[i])
                }
            }
        }
        f(el)
    })
})
// 使用方法 
.richtext(v-html="content" v-richtext='')

3. Непонимание решений высокой четкости Чем выше dpr, тем четче получается из-за того, что само устройство мало связано с масштабированием или что при dpr равном 1 четкости хватает, и нет необходимости масштабировать, чтобы веб-страница отображалась четче( краткое изложение практики, подтверждения данных не найдено) 4. Проблемы совместимостиnuggets.capable/post/684490…

2. vw схема

Ссылаться на

3. rem + vw (рекомендуемое решение)

Установите значение размера шрифта корня html // Проектный чертеж 750*1334

html {
  height: 100%;
  font-size: 50px; // 向下兼容 不止vw时候 写死font-size
  font-size: 13.33333333vw; // 7.5rem === 100vw
  margin: 0 auto;
}


@media (min-width: 560px) { // pc兼容
  html,body {
    font-size: 54px;
    max-width: 540px;
  }
}

@media (max-width: 1024px) { // ipad兼容：ipad最大1024px
  html,body {
    max-width: 1024px;
  }
}

Проблема с отображением 1px Физический пиксель dpr>=2 дублируется 2 раза

.border-bottom {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-color: red;
    height: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    @media only screen and (min-resolution: 2dppx) { // 非标准的
      -webkit-transform: scaleY(0.5);
      -webkit-transform-origin: 50% 0%;
    }
  }
}
// only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到
// -webkit-device-pixel-ratio 是一个非标准的布尔类型CSS媒体类型，是标准 
// resolution 媒体类型的一个替代方案.

как написать единицу

Способ 1: postcss-px2rem (vue-cli3)

Это не рекомендуется здесь, потому что px2rem: неудобно добавлять /*no*/ при написании px.

const px2rem = require('postcss-px2rem')
const postcssPx2rem = new px2rem({
  remUnit: 50 // 基准大小
})
css: {
    loaderOptions: {
      postcss: {
        plugins: [postcssPx2rem]
      },
    }
  },

Метод 2: Текущий план состоит в том, чтобы напрямую написать 7,5rem=100vw и разделить черновик проекта на 100.

Способ 3: подключаемый модуль редактора px2rem, такой как vscode cssrem

Бесконечная проблема (CALC) Рекомендуемая совместимость

Кратко о преимуществах vw + rem

  • Простота реализации
    • Не зависит от плагинов и сторонних библиотек
    • Несколько строк кода css могут сделать это
  • легко развиваться
    • 100vw === Проектный проект / 100 бэр для легкого преобразования
    • Не влияет на использование px, отлично совместим со сторонними библиотеками компонентов
    • Нет проблем с совместимостью, таких как форматированный текст и фреймы.
Категории