Адаптация мобильного терминала-REM

внешний интерфейс браузер CSS

Разрешение экрана

пиксель

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

На картинке выше есть 7 маленьких блоков по горизонтали и 7 маленьких блоков по вертикали, что означает 7*7 пикселей.

Разрешение iPhone 8 составляет 1334*750 пикселей, 750 пикселей по горизонтали и 1334 пикселей по вертикали.

PPI

Размер экрана и разрешение являются расчетными значениями.Цяо Банчжу сказал, что PPI, превышающий 326, называется экраном сетчатки.

PPI = \dfrac{{\sqrt{长度像素^2 + 宽度像素^2}}}{屏幕对象线英寸数}

iPhone8 PPI

\dfrac{\sqrt{1334^2 + 750^2}}{4.7} = 325.612

Отличие экрана Retina от обычного экрана

Чем больше пикселей в единице экрана Retina, чем в обычном пиксельном экране. Например, пиксели iPhone3 и iPhone4 (960 * 640) / (480 * 320) = 4

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

В настоящее время общепринятой практикой является использование отношения devicePixelRatio для указания того, сколько физических пикселей равно 1 CSS.

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

Физический пиксель/логический пиксель Когда devicePixelRatio равно 2, 1px = 2 физических пикселя

Физические пиксели Сколько пикселей по горизонтали и вертикали на физическом материале экрана Логические пиксели.Сколько пикселей программа считает горизонтальными и вертикальными на экране.

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

@2x и @3x

На веб-странице отображается изображение: ширина: 100 пикселей, высота: 100 пикселей.

iPhone 3GS: двойной экран, для отображения одного пикселя изображения требуется один физический пиксель Изображение размером 100 x 100 пикселей может использовать все физические пиксели.

iPhone 4: Двойной экран, для отображения одного пикселя изображения требуется 2 физических пикселя, изображение размером 200 x 200 пикселей может использовать все физические пиксели (очистить +1).

iPhone 7 Plus: тройной экран, для отображения одного пикселя изображения требуется 3 физических пикселя, изображение размером 300 x 300 пикселей может использовать все физические пиксели (очистить +2).

viewport

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

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

вьюпорт макета, визуальный вьюпорт, идеальный вьюпорт

В настоящее время ширина мобильных браузеров в основном уже, чем у настольных браузеров, поэтому, когда веб-сайт на рабочем столе размещается на мобильном устройстве, он будет переполнен, потому что область просмотра слишком узкая, хотя текущее разрешение на мобильных устройствах относительно большой (768 * 1024), (1080 * 1920), но поскольку размер экрана не увеличился, 1 пиксель в CSS требуется для представления большего количества физических пикселей, так что 1 пиксель может быть нормальным на экранах с высоким разрешением и экранах с низким разрешением Дисплей.Поэтому браузер решает установить более широкое значение области просмотра по умолчанию (по умолчанию 980 пикселей), бог ppk называет область просмотра браузера по умолчанию какlayout viewport, Доступно через document.documentElement.clientWidth.

layout viewportШирина больше, чем ширина видимой области мобильного браузера, поэтому нам также нужен вьюпорт для указания размера видимой области, которую бог ppk называет этимvisual viewportЕго можно получить через window.innerWidth.

Поскольку все больше и больше веб-сайтов разрабатываются отдельно для мобильных устройств, возникает необходимость в адаптации, которая не требует от пользователей масштабирования и прокрутки для просмотра всего содержимого веб-сайта.Бог ppk называет этоidea viewport "идеальная ширина веб-страниц на устройство"

1 пиксель вниз на мобильном телефоне

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

Для двойного экрана, как iPhone 7

 <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5,
minimum-scale=0.5, user-scalable=no">

Для тройного экрана, как iPhone 7 Plus

<meta name="viewport" content="initial-scale=0.3333333333333333,
maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333,
user-scalable=no">

Мобильный терминал REM

Установите масштаб окна просмотра на 1.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

width属性控制视口的宽度.可以像width=600这样设为确切的像素数，或者设为device-width这一特殊值来指代比例为100%时屏幕宽度的CSS像素数值,initial-scale属性控制页面最初加载时的缩放等级,maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面

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

Например, при масштабе 1 ширина эскиза дизайна составляет 750, а ширина устройства делится на 10 равных частей.На iPhone6/7/8 размер шрифта .html составляет 37,5 пикселей. на этот раз 1rem=37.5px

scale为1在2倍屏下 750/2 = 375 
将设计稿10等分 375/10 = 37.5
1rem = 37.5px
установить рем
// 将设备的宽度10等分
function setRem() {
        var scrren = document.documentElement.clientWidth || 320
        document.getElementsByTagName('html')[0].style.fontSize = scrren / 10 + "px"
    }
sass
// 设计稿宽度
    $phoneWidth : 750;
    // 计算每个等分的缩放比例 * 10
    @function px2remP( $width ){
      @return $width / $phoneWidth * 10rem;
    }
Категории