Можете ли вы иметь рамку 0.5px на Retina Display? - PullRequest
Новая
       54

Можете ли вы иметь рамку 0.5px на Retina Display?

9 голосов
/ 27 декабря 2011

В мобильном браузере Safari на iPhone 4 или iPhone4S может быть граница делителя шириной 0,5 пикселя?

Ответы [ 8 ]

8 голосов
/ 18 сентября 2014

Использование border-width: 0.5px

Safari 8 (как в iOS, так и в OS X) приносит border-width: 0.5px.Вы можете использовать это, если вы готовы принять, что текущие версии Android и старые версии iOS и OS X будут просто показывать обычную границу (на мой взгляд, справедливый компромисс).

Вы не можете использоватьЭто напрямую, хотя, потому что браузеры, которые не знают о 0.5px границах, будут интерпретировать его как 0px.Без границ.Итак, что вам нужно сделать, это добавить класс к вашему элементу <html>, когда он поддерживается: 

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1)
  {
    document.querySelector('html').classList.add('hairlines');
  }
  document.body.removeChild(testElem);
}
// This assumes this script runs in <body>, if it runs in <head> wrap it in $(document).ready(function() {   })

Затем использование ретинальных волос становится очень простым: 

div {
  border: 1px solid #bbb;
}

.hairlines div {
  border-width: 0.5px;
}

Best ofвсе, вы можете использовать border-radius с ним.И вы можете использовать его с 4 границами (сверху / справа / снизу / слева) так же легко.

Источник: http://dieulot.net/css-retina-hairline

8 голосов
/ 08 января 2014

Я написал обзор различных техник :

Полупиксельная рамка 

border: 0.5px solid black;

Минусы:

  • Работает только в Firefox и Webkit Nightly.

границы изображения 

border-width: 1px;
border-image: url(border.gif) 2 repeat;

border.gif - изображение размером 6 × 6 пикселей:

border image explained

Плюсы:

  • Работает!

Минусы:

  • Внешнее изображение. Это всего 51 байт, и он может быть встроен с помощью Data URI. Вам нужно запустить Photoshop (или что-либо еще), чтобы изменить цвет рамки, что не очень удобно.

Несколько фоновых изображений 

background:
    linear-gradient(180deg, black, black 50%, transparent 50%) top    left  / 100% 1px no-repeat,
    linear-gradient(90deg,  black, black 50%, transparent 50%) top    right / 1px 100% no-repeat,
    linear-gradient(0,      black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
    linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left  / 1px 100% no-repeat;

« Как нацелить физические пиксели на экранах сетчатки с помощью CSS » описывает, как нарисовать линию. Нарисуйте 4 линии, и у нас есть граница.

Плюсы:

  • Нет внешних изображений.

Минусы:

  • Громоздкий синтаксис, хотя его можно абстрагировать с помощью препроцессоров CSS.

Масштабирование вверх и вниз

Упоминается здесь уже Прийтом Пирита.

6 голосов
/ 25 сентября 2013

Да.Используйте масштаб.Приведенный ниже стиль даст вам линию роста волос 

 .transform-border-hairline {
     border-bottom: 1px #ff0000 solid;
     transform: scaleY(0.5);
 }

Когда вам нужны все стороны, лучший способ состоит в том, чтобы снова установить DIV с помощью: after или: перед псевдоклассом CSS, применить к этому псевдоклассу границу, сделать ее в дваразмер, а затем масштабировать его с помощью преобразования: уменьшить до половины.

pre:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px #999 solid;
    content: "";
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

Более конкретно (и все эти хитрости тоже используются) здесь http://atirip.com/2013/09/22/yes-we-can-do-fraction-of-a-pixel/

2 голосов
/ 12 июля 2014

Также я обнаружил, что этот метод работает (iOS7): 

    background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='#ff0000' x='0' y='0' width='1' height='0.5'/></svg>");
2 голосов
/ 11 июня 2014

Apple добавила поддержку для этого в OSX Yosemite и iOS 8. 

@media (-webkit-min-device-pixel-ratio: 2){
    div {
        border-width:0.5px;
    }
}
1 голос
/ 21 ноября 2012

С помощью CSS это можно сделать с помощью box-shadow и радиуса разброса.Подход объясняется здесь: http://bradbirdsall.com/mobile-web-in-high-resolution

Это скопировано по ссылке выше: 

box-shadow: inset 0 0 1px #000,
            inset 0 1px 0 #75c2f8,
            0 1px 1px -1px rgba(0, 0, 0, .5);
0 голосов
/ 28 июля 2014

Совместное использование миксина SASS / SCSS + Compass Я написал и использовал: 

@mixin hairline($color, $side: 'top') {
  &:before {
    content: ' ';
    display: block;
    @if $side == 'top' {
      width: 100%;
      height: 1px;
    }
    @else if $side == 'bottom' {
      width: 100%;
      height: 1px;
    }
    @else {
      width: 1px;
      height: 100%;
    }
    position: absolute;
    #{$side}: 0;
    background-color: $color;
    @media (-webkit-min-device-pixel-ratio: 2) {
      @if $side == 'top' {
        @include transform(scaleY(0.5));
      } @else if $side == 'bottom' {
        @include transform(scaleY(0.5));
      } @else {
        @include transform(scaleX(0.5));
      }
    }
  }
}

Пример CSS: 

.my-element-where-i-need-a-retina-bottom-border {
  @include hairline(red, 'bottom');
}
0 голосов
/ 27 декабря 2011

Я не уверен, что именно вы имеете в виду.Если вы спрашиваете, можете ли вы нарисовать границу размером 1 пиксель на iPhone 4, которая будет равна 1/2 физического размера границы на iphone3G, тогда да.CoreGraphics использует точки вместо пикселей.Как вы можете видеть следующим способом, вы можете указать число с плавающей запятой: 

void CGContextSetLineWidth (
   CGContextRef c,
   CGFloat width
);

Поскольку 1point! = 1px, вы можете указать 1px на iPhone4, указав 0.5point.

Читайте об этом здесь

...