Какова концепция экрана сетчатки, предложенная Джобсом?

внешний интерфейс CSS
Какова концепция экрана сетчатки, предложенная Джобсом?

Мало знаний, большой вызов! Эта статья участвует в "Необходимые знания для программистов«Творческая деятельность.

Эта статья также участвует "Проект "Звезда раскопок""  , чтобы выиграть творческие подарочные наборы и бросить вызов творческим поощрениям

Ссылка на эту статью«Почему мобильный терминал не может быть написан как веб-сайт ПК»Лучший непрерывный просмотр

экран сетчатки

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

image.png

Например, в приведенном выше примере мы увидим, что хотя размер мобильного телефона значительно изменился, отображение страницы выглядит так же? ? Разве разрешение не должно быть разным: глядя на большое и маленькое, отображение каждого разрешения отличается?

Популярная наука:

существуетiphone4视网膜屏幕Можно сказать, что эта концепция потрясающая, давайте посмотрим, что такое экран сетчатки.

Картинка, чтобы показать вам: экран Retina

image.png

телефон с низким разрешением1размер = телефон с высоким разрешением2 * 2размер

Таким образом, экран более изыскан, и, похоже, не изменяется по размеру, как показано ниже

image.png

левая сторона300物理像素, правый использует600物理像素, но... у нас не может быть одного пикселя на телефон, верно? ? ?

Сколько чертежей нужно? Сколько стилей писать? ?

Таким образом, мы должны использовать ту же агрегат, чтобы сообщить устройства различных разрешений, что размер пикселя должен отображаться на интерфейсе. Это устройство设备独立像素

Независимый от устройства пиксель

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

Какова связь между аппаратно-независимыми пикселями и тем, что мы называем физическими пикселями?

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

    Соотношение пикселей: отношение физических пикселей к аппаратно-независимым пикселям.

    Это соотношение, мы можем использовать js для полученияwindow.devicePixelRatio

    iphone6
    физический пиксель 750 * 1334
    2
    Независимый от устройства пиксель 375 * 667

    Конечно, есть и исключения для устройств:

    iPhone6 plus
    физический пиксель 1080 * 1920
    3
    Независимый от устройства пиксель 414 * 736

    ? ? ? ? ? ? ? ? ? ?

image.png

Как насчет соотношения пикселей = физические пиксели / независимые от устройства пиксели? ?

（414 * 736 ）* 3 = 1242 * 2208

说好的 1080 * 1920呢？ ?多出来的要怎么办？Будьте уверены, что телефон автоматически поместит независимые от устройства пиксели 1242 * 2208, 1080 * 1920 физических пикселей вВы также можете видеть, что iphone6 ​​соответствует нашим требованиям к соотношению пикселей, поэтому, как правило, чертежи дизайна мобильного телефона, которые мы получаем,750*1334из

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

Веб-разработка

Я так много читал о размере выше, но мы до сих пор не знаем, что делать.Имеет ли размер, независимый от устройства, какое-либо отношение к нашему написанию css? Или как нам сделать так, чтобы css, который мы установили, соответствовал размеру, независимому от устройства? Прежде всего, нам нужно знать, откуда взялись ширина и высота, которые мы изначально видели.
элемент div 300 * 300
iphone6 128 * 128
видовой экран макета 980
Независимый от устройства пиксель 375 * 667

375 / 980 * 300 = 114

В соответствии с приведенной выше формулой мы обнаружили, что пока мы устанавливаем область просмотра макета в соответствии с независимым от устройства пикселем, наш пиксель CSS равен независимому от устройства пикселю.

Так что же такое вьюпорт макета?

Уведомление! ! ! Зума быть не должно, если 100%

Концепция видового экрана

Вьюпорты можно разделить на три типа: вьюпорты компоновки, визуальные вьюпорты и идеальные вьюпорты.Что это такое?Давайте посмотрим.

  • видовой экран макета

    Окна просмотра макета: макет страницы — это справочное окно, в котором рассматривается только макет, который не является содержимым не-макета, например полосы прокрутки, такие как строка меню.

    На мобильном телефоне просмотра макета имеет значение по умолчанию980px

    В js отdocument.documentElement.clientWidthЧтобы получить размер просмотра макета

    image.png

  • визуальное окно просмотра

    Visual Viewport: реальная область, которую пользователь видит визуально, включая полосы прокрутки.

    В js вы можете пройтиwindow.innerWidth

    image.png

  • идеальное окно просмотра

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

    использовать в jswindow.screen.widthможет быть получен

    image.png

Продолжение следует

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

11.png

Прекрасная рекомендация в прошлом

Несколько методов шифрования, обычно используемых во внешнем интерфейсе

Холст Восхождение на Пит-Роуд [Методы]

Не разбираетесь в сео-оптимизации? Статья, которая поможет вам понять, как сделать SEO-оптимизацию

Холщовая дорога для скалолазания [Свойства]

[Практическая глава] Руководство по разработке мини-программы WeChat и практика оптимизации

Поговорим о мобильной адаптации

Практика оптимизации производительности интерфейса

Разговор о раздражающих регулярных выражениях

Получите адрес потока большого двоичного объекта файла для реализации функции загрузки.

Не понимаете виртуальный DOM Vue? Эта статья поможет вам полностью получить виртуальный DOM

Рекомендации, связанные с Git

Простое введение в Git

git реализует автоматическое нажатие

Рекомендации, связанные с интервью

Front-end Swastika — Основы

Внешний вид 4D-зоны — расширенный

Для получения дополнительной информации см.:Домашняя страница

Категории