Первое знакомство 1px

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

Причины более толстых границ

В объекте окна естьdevicePixelRatioАтрибут, он может отображать соотношение пикселей в css к соотношению пикселей устройства. Однако 1px равен 1px этого мобильного устройства на разных мобильных устройствах, потому что разные мобильные устройства имеют разную плотность пикселей. Официальное определение этого свойства: отношение физических пикселей устройства к независимым от устройства пикселям, то есть

devicePixelRatio = 物理像素 / 独立像素

Вы все еще помните предложение заголовка мобильного html?

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

Это предложение определяетviewportШирина — это ширина устройства, начальное значение масштабирования и максимальное значение масштабирования равны 1, а пользовательское масштабирование отключено.
Существует идеал, который можно идеально адаптировать к мобильному телефону.viewport, идеально подходит для телефонов с самыми разными разрешениямиviewportШирина может быть одинаковой, цель этого состоит в том, чтобы обеспечить одинаковый эффект отображения css на разных экранах, указанная выше мета фактически установленаideal viewportширина .
Возьмем практический пример: ширина экрана iphone3 и iphone4 составляет 320 пикселей, 640 пикселей, но ихideal viewportШирина 320 пикселей. После установки ширины устройства элементы шириной 320 пикселей могут занимать 100 % ширины экрана. Различные мобильные телефоны.ideal viewportШирина разная, общие 320px, 360px, 384px.Это значение серии iphone 320px до 6, управлениеviewportПреимущество в том, что набор CSS можно адаптировать к нескольким моделям.

Те, кто разбирается, должны уже понять, почему 1px утолщается,viewportНастройки экрана и физическое разрешение экрана пропорциональны, а не совпадают Объект мобильного окна имеетdevicePixelRatioАтрибут представляет собой соотношение физических пикселей устройства и пикселей css. На iPhone с экраном Retina это значение равно 2 или 3. Длина 1 пиксель, записанная в css, сопоставляется с физическим пикселем, а длина составляет 2 пикселя или 3 пикселя. .Об этом здесь Тут кто-то спросит, а какие есть решения?

1px решение

Псевдокласс+`transform`выполнить

Для решения проблемы с границей 1px я лично считаю, что наиболее идеальным решением является псевдокласс +transformЛучше.
Принцип: это поставить исходный элементborderудалить, а затем использовать:beforeили:afterпеределыватьborder,иtransformизscaleУменьшить наполовину, исходный элемент позиционируется относительно новогоborderАбсолютное позиционирование.

Одинокийborderнастройки стиля

.scale{
  position: relative;
  border:none;
}
.scale:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

Четыре настройки стиля границы:

.scale{
  position: relative;
  margin-bottom: 20px;
  border:none;
}
.scale:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

Лучше всего оценить перед использованием, в сочетании с кодом JS, чтобы решить, является ли экран Retina
```
if(window.devicePixelRatio && devicePixelRatio >= 2){
  document.querySelector('ul').className = 'scale';
}
```

flexible.js

Это решение принято мобильным терминалом Taobao, адрес github:GitHub.com/Ah Trouble/Церковное право…Как упоминалось ранее, причина, по которой 1 пиксель утолщается, заключается в том, чтобы установить ширину области просмотра по всем направлениям. Если ширину области просмотра можно установить на фактическую физическую ширину устройства, разве 1 пиксель в CSS не равен фактической длине в 1 пиксель? это то, что делает flexible.js.

Значение масштаба внутри относится к масштабированию идеального окна просмотра. Когда flexible.js обнаружит модель IOS, он рассчитает масштаб = 1/devicePixelRatio, а затем установит окно просмотра.

metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

Когда devicePixelRatio=2, выходные метаданные выглядят следующим образом, поэтому отношение области просмотра к идеальной области просмотра составляет 0,5, что согласуется с физическими пикселями устройства.

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

Когда devicePixelRatio = 3, выходное окно просмотра

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

Эмулировать границы с помощью box-shadow

Используйте CSS для работы с тенями, чтобы добиться эффекта 0,5px