что такое пиксель?
Пиксель — это наименьшая единица отображения экрана.На экране 1080p его количество пикселей составляет 1920*1080, то есть по горизонтали 1920 пикселей, а по вертикали 1080 пикселей. Пиксель — это единичный цветовой блок, состоящий из четырех каналов RGBA. Для объектива 12-мегапиксельной камеры он имеет 12 миллионов светочувствительных единиц, а максимальное разрешение изображения, которое он может выводить, составляет около 3000*4000.
Так имеет ли сам пиксель размер?Насколько велик пиксель?
Да, если пиксель меньше, то на экране того же размера пикселей нужно больше, и пиксели плотнее, если в дюйме 435 пикселей, то его dpi/ppi будет достигать 435. Разрешение Macbook Pro 15 дюймов составляет 2880 x 1800. 15 дюймов означает, что диагональ экрана составляет 15 дюймов (конкретно 15,4).Согласно соотношению сторон, горизонтальная сторона составляет 13 дюймов, поэтому ppi составляет 2880/13 = 220 ppi Чем плотнее пиксели, тем выше ppi (пиксель на дюйм), тем более детальным и высоким разрешением выглядит экран.
В Mac/Windows можно установить разрешение экрана.Макинтош по умолчанию равен половине разрешения устройства.Его dpr = 2, то есть 2 пикселя по длине и ширине представляют 1 пиксель, поэтому 2880 физических пикселей на самом деле представляют собой только 1440 логических пикселей:
Итак, наш вопрос: как нарисовать границу в 0,5 пикселя на экране с высоким разрешением? 0,5 пикселя эквивалентны 1 пикселю физического пикселя экрана высокой четкости. Цель этого состоит в том, чтобы выглядеть немного тоньше на экране высокой четкости, и эффект будет немного лучше, например, более тонкие разделители.
пустыня в "Поговорим о решении 1px под Retina” уже обсуждал этот вопрос, и здесь мы обсудим его снова.
Теоретически минимальная единица px равна 1, но будет несколько особых случаев, и отображение экрана высокой четкости — это особый случай. Экран высокого разрешения действительно может отрисовывать 0,5 пикселя, и эффект сравнения выглядит следующим образом:
если мыУстановите 0,5px напрямую, в разных браузерах будет разная производительность, используйте следующий код:
<!DOCType html>
<html>
<head>
<meta charset="utf-8">
<style>
.hr {
width: 300px;
background-color: #000;
}
.hr.half-px {
height: 0.5px;
}
.hr.one-px {
height: 1px;
}
</style>
</head>
<body>
<p>0.5px</p>
<div class="hr half-px"></div>
<p>1px</p>
<div class="hr one-px"></div>
</body>
</html>Протестируйте результаты теста в разных браузерах на ПК следующим образом:
При этом можно нарисовать 0,5 шток Chrome 1PX в закругленную, в то время как можно нарисовать полпиксель Firefox / Safari, и в качестве хрома будет 0,5Px менее 0, но не менее 0,55 пикал, так как Firefox будет 1px, Safari не менее 0,75 PX AS 1PX, дальнейшее наблюдение за iOS будет нарисовать край 0,5 шток Chrome, а родной браузер Android (5.0) не работает на вашем телефоне. Поэтому непосредственно 0,5ПК разные браузеры являются отличными отличиями, и мы видим, что разные системы разных браузеров имеют разные обработки десятичной точки PX. Таким образом, если мы поставьте устройство, чтобы включить десятичную PX широко, на самом деле, менее надежным, потому что разные браузеры ведут себя по-разному.
Второй метод, о котором я могу думать, это масштабирование, могу ли я установить 1px, а затемscale 0.5Ну, мы можем попробовать это, как показано в следующем коде:
<style>
.hr.scale-half {
height: 1px;
transform: scaleY(0.5);
}
</style>
<p>1px + scaleY(0.5)</p>
<div class="hr scale-half"></div>Результаты, как показано ниже:
Мы обнаружили, что Chrome/Safari стал виртуальным, только Firefox более совершенен и выглядит солидно и очень тонко, эффект такой же, как и при прямой установке 0,5px. Таким образом, передача transform: scale приведет к тому, что Chrome станет виртуальным, а толщина почти не изменится. Но если вы добавите transform-origin: 50% 100%:
.hr.scale-half {
height: 1px;
transform: scaleY(0.5);
transform-origin: 50% 100%;
}Все стало солидно, идеально, эффект от Хрома следующий (спасибо @Тихая рыбалкаисправление):
В дополнение к этому методу мы также думали об использовании rem для масштабирования при выполнении мобильных терминалов, но на самом деле масштабирование rem в конечном итоге будет преобразовано в px, так что это то же самое, что использовать 0,5px напрямую.
Что еще можно сделать? также можно использоватьЛинейный градиент, как показано в следующем коде:
<style>
.hr.gradient {
height: 1px;
background: linear-gradient(0deg, #fff, #000);
}
</style>
<p>linear-gradient(0deg, #fff, #000)</p>
<div class="hr gradient"></div>Linear-gradient(0deg, #fff, #000) означает: угол градиента снизу вверх, от белого #fff к черному #000, и он линейный. На экране высокой четкости 1 пиксель логического пикселя представляет собой физический (устройство) пиксель имеет 2 пикселя, потому что это линейный градиент, поэтому первый пиксель может быть только #fff, а оставшийся пиксель может быть только #000, что позволяет достичь цели рисования половины. Логический анализ совершенен, но как насчет фактического эффекта, как показано на следующем рисунке:
Мы обнаружили, что этот метод не идеален в разных браузерах, эффект виртуальный, и между идеальными 0,5 пикселя все еще есть разрыв. Этот эффект аналогичен эффекту масштаба 0,5, все из которых представляют собой размытые линии, заставляющие людей чувствовать себя стройнее.
Есть другой способ,использовать коробчатую тень, как показано в следующем коде:
<style>
.hr.boxshadow {
height: 1px;
background: none;
box-shadow: 0 0.5px 0 #000;
}
</style>
<p>box-shadow: 0 0.5px 0 #000</p>
<div class="hr boxshadow"></div>Установите для второго параметра box-shadow значение 0,5 пикселя, что означает, что вертикальное смещение тени равно 0,5 пикселя Эффект будет следующим:
Этот метод отлично работает в Chrome и Firefox, но Safari не поддерживает boxshadow размером менее 1 пикселя, поэтому он вообще не отображается.
Достаточно хорошоИспользуйте SVG, использование обводки SVG и других атрибутов в 1 пиксель по-прежнему составляет 1 пиксель физического пикселя, а не 1 пиксель экрана высокой четкости. Как показано в следующем коде:
<style>
.hr.svg {
background: none;
height: 1px;
background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");
}
</style>
<p>svg</p>
<div class="hr svg"></div>Установите фон в файл svg, и этот svg копируется отдельно, вот так:
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'>
<line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line>
</svg>Используйте линейный элемент svg для рисования линии, штрих представляет цвет штриха, а ширина штриха по умолчанию штрих-ширина = "1", потому что 1 пиксель штриха svg и другие атрибуты равны 1 пиксель физического пикселя, что эквивалентно до 0,5 пикселей экрана высокой четкости.Вы также можете использовать такие элементы, как прямоугольник svg для рисования. Эффект в Chrome и Safari выглядит следующим образом:
Это решение тоже идеально, но оно зависает в firefox.Причина в том, что если background-image firefox svg, он поддерживает только именованные цвета, такие как «черный», «красный» и т. д. Если вы поместите svg в приведенный выше код. Если #000 изменить на черный, он может отображаться, но это очень негибко. В противном случае мы можем конвертировать только svg в base64.Мы конвертируем содержимое svg в base64 (вы можете найти некоторые онлайн-инструменты).Сравнение выглядит следующим образом:
.hr.svg {
background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==");
}Это также может быть прекрасно отображено в firefox.
На самом деле требование 0,5 пикселя должно быть более распространенным на мобильном терминале. Сравните производительность пяти вышеуказанных методов на IOS и Android, как показано на следующем рисунке:
Safari и Chrome под IOS имеют одинаковую производительность, и эффект от установки 0.5px напрямую самый лучший, тогда как у браузера Android лучший эффект от box-shadow (пробовал 5 и 7), а схема svg/transform именно в нем отлично поддерживается как на устройствах IOS, так и на Android. Читатели могут открытьэта страницачтобы увидеть, что лучше всего работает на вашем устройстве.
Объединив вышеизложенное, мы первоначально делаем следующие выводы:
Еще одним преимуществом использования SVG по сравнению с box-shadow и другими методами является то, что с помощью элементов svg можно рисовать любую графику, например четырехугольники, закругленные углы и т. д.
Наконец, есть универсальный метод, то есть путем управления окном просмотра, в разработке мобильного терминала масштаб окна просмотра обычно устанавливается равным 1:
<meta name="viewport" content="width=device-width,initial-sacle=1">Где width=device-width означает подгонку ширины окна просмотра к ширине устройства, что обычно относится к физической ширине. Коэффициент масштабирования по умолчанию равен 1. Например, ширина вертикального экрана iPhone 6 составляет 750 пикселей, его dpr = 2, а 2 пикселя используются для представления 1 пикселя.После этой настройки ширина области просмотра становится равной 375 пикселям. В настоящее время сторона 0,5px использует метод, который мы обсуждали выше.
Но вы можете изменить масштаб на 0,5:
<meta name="viewport" content="width=device-width,initial-sacle=0.5">В этом случае ширина окна просмотра составляет исходные 750 пикселей, поэтому 1 пиксель по-прежнему равен 1 пиксель, и нормальная отрисовка — это нормально, но это также означает, что пользовательский интерфейс нужно отрисовывать в два раза больше, а единицей общей поверхности будет удвоился.
На iPhone X и некоторых телефонах Android с dpr = 3 нужно установить масштаб 0,333333, что в 3 раза больше рисунка.
Таким образом, обсуждаются некоторые концепции пикселей и окна просмотра, а также вводятся и сравниваются несколько методов рисования 0,5 пикселей на экранах высокой четкости — вы можете напрямую установить границу ширины и высоты на 0,5 пикселей и установить вертикальное смещение прямоугольника. тень Величина 0,5px, с помощью линейного градиента linear-gradient, методом трансформации: scaleY(0,5), методом SVG. Наконец, обнаружено, что метод преобразования масштаба/svg имеет наилучшую совместимость и эффект, а svg может поддерживать сложную графику, поэтомуКогда область просмотра равна 1, вы можете использовать transform/SVG для рисования 0,5 пикселей, а если коэффициент масштабирования области просмотра не равен 1, вы можете напрямую рисовать 1 пиксель..