Проблема с позиционированием css-спрайтов при использовании rem-юнитов на мобильных устройствах

внешний интерфейс Ресурсы изображений Icon CSS

Сейчас при разработке мобильных wap страниц, я считаю, что все будут использовать мощные блоки rem для адаптации к различным моделям и экранам, для уменьшения количества сетевых запросов и повышения производительности доступа к веб-странице несколько мелких иконок обычно объединяют в изображение спрайта, а затем позиционирование выполняется в соответствии с background-position, однако из-за расчётного отклонения компьютера отображение значка часто приводит к отклонению в 1-2 пикселя;

1. Сторона ПК

Если это на стороне ПК, позиционирование карты Sprite на самом деле очень просто, особо нечего сказать, просто перейдите к коду:

HTML-код

<ul class="sprites-box">
    <li class="icon icon-bill"></li>
    <li class="icon icon-emailmsg"></li>
    <li class="icon icon-import"></li>
    <li class="icon icon-music"></li>
    <li class="icon icon-pay"></li>
    <li class="icon icon-search"></li>
    <li class="icon icon-speak"></li>
    <li class="icon icon-task"></li>
</ul>

css-код

body, ul { margin: 0; }
ul { padding: 50px; list-style: none; overflow: hidden; }
li { float: left; margin: 10px; }
.icon { background-image: url('./sprite.png'); }
.icon-bill { background-position: -35px 0px;  width: 32px; height: 32px; }
.icon-emailmsg { background-position: 0px -32px; width: 32px; height: 32px; }
.icon-import { background-position: -32px -32px; width: 32px; height: 32px; }
.icon-music { background-position: -67px 0px; width: 32px; height: 32px; }
.icon-pay { background-position: 0px 0px; width: 35px; height: 32px; }
.icon-search { background-position: -67px -32px; width: 32px; height: 32px; }
.icon-speak { background-position: 0px -64px; width: 32px; height: 32px; }
.icon-task { background-position: -32px -64px; width: 32px; height: 32px; }

Эффект

sprite

Поскольку он использует позиционирование PX, а единицы экрана и увеличение фиксированы, эффект снежной карты может быть идеально реализован;

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

На мобильной стороне, из-за увеличения экрана различных моделей, макет, использующий px в качестве единицы, будет иметь большие проблемы с адаптацией, поэтому основная схема адаптации заключается в использовании rem в качестве единицы и расчете базы rem в соответствии с экраном. значение увеличения для адаптации;

Я основываюсь на черновом дизайне шириной 750, а значение каждого 1rem соответствует длине 100 пикселей в черновом дизайне; Так как размер значка в основном одинаковый, производится небольшая обработка, отрезается прозрачная часть значка и синтезируется изображение спрайта с разными размерами;

1. Преобразование напрямую в рем-единицы

После преобразования код css приведенного выше изображения спрайта выглядит следующим образом:

body, ul { margin: 0; }
ul { padding: 0.5rem; list-style: none; overflow: hidden; }
li { float: left; margin: 0.1rem; }
.icon { background-image: url('./sprite.png'); background-size: 0.96rem 0.92rem; background-repeat: no-repeat; }
.icon-bill { background-position: -0.67rem -0.26rem; width: 0.28rem; height: 0.26rem; }
.icon-emailmsg { background-position: 0 -0.64rem; width: 0.26rem; height: 0.28rem; }
.icon-import { background-position: -0.26rem -0.64rem; width: 0.26rem; height: 0.28rem; }
.icon-music { background-position: -0.35rem 0; width: 0.32rem; height: 0.32rem; }
.icon-pay { background-position: 0 0; width: 0.35rem; height: 0.32rem; }
.icon-search { background-position: -0.32rem -0.32rem; width: 0.29rem; height: 0.27rem; }
.icon-speak { background-position: 0 -0.32rem; width: 0.32rem; height: 0.32rem; }
.icon-task { background-position: -0.67rem 0; width: 0.29rem; height: 0.26rem; }

Эффект:

sprite_mobile1

Если вы внимательно посмотрите, то увидите, что в некоторых местах будет отклонение примерно в 1 пиксель. Это связано с расчетным отклонением разных мобильных телефонов. Если значок относительно простой, не имеет значения, приемлем ли эффект. , Если требования к отображению значка высоки, то этот метод явно не может удовлетворить требования;

2. После преобразования в бэр найти в процентах

Сначала подтвердитеbackground-positionИспользуя концепцию процентного таргетинга:

Когда значением свойства является процент, изображение спрайта и поле, отображающее значок, будут размещены с указанной точкой как совпадающей точкой. Короче говоря, при значении 10% 20% точка в положении 10% 20% спрайта совпадает с точкой 10% 20% окна отображения (а не с точкой 0% 0%).

Возьмите каштан:Имеется изображение спрайта 200 X 200 и поле отображения значка 50 X 50. Если вы установитеbackground-position: 0% 0%;

Эффект следующий:

position0%0%

Если установленоbackground-position: 100% 100%;, точка на 100% 100% положении коробки иконы и точка на 100% 100% позиции изображения спрайта будет получена первым, а затем они будут совпадающими;

Эффект следующий:

position100%100%ready
position100%100%result

Отсюда видно, что:Эффект его процентного позиционирования эквивалентен первому позиционированию верхнего левого угла поля значка на 100% 100% позиции изображения спрайта, а затем перемещению поля значка на 100% 100% обратно в левый верхний угол;

Это эффект, достигаемый, когда мы знаем процент, и когда мы получаем карту спрайтов, мы часто знаем следующую информацию:

  • размер каждой иконки
  • размер спрайта
  • Расположение каждого значка на карте спрайтов

В это время нам нужно рассчитать процент позиционирования по известным условиям, что становится математической задачей:

Известно, что ширина и высота значка равны 50, ширина и высота спрайта равны 200, а координаты левого верхнего угла значка в спрайте равны (50, 60).background-position;

解：
因为 background-position 定位的概念为 icon 框和 sprite 图各自指定位置重合；
设：sprite 宽为 W，高为 H，icon 宽为 w，高为 h，icon 在 sprite 中的坐标为 (x,y)，得到百分坐标为 (m,n) 故可得到以下公式：
mW-mw=x  =>  m(W-w)=x  =>  m=x/(W-w)*100%
nH-nh=y  =>  n(H-h)=y  =>  n=y/(H-h)*100%
计算可得：
m=50/(200-50)*100%=33.3%
n=60/(200-50)*100%=40%

Конечно, формула та же, что и выше. Если она написана на css, ее нужно рассчитать с помощью calc(), метода расчета css. Если учащиеся не понимают, что такое calc, они могут самостоятельно использовать Baidu прекомпиляторы css, такие как scss или меньше, для написания стилей. Это проще, просто напишите метод миксина напрямую;

3. Другие способы

  • Используйте одно изображение для каждого маленького значка, а затем передайтеbackground-size: cover|100%|contain;Он тоже может отображаться отлично, но когда на странице много иконок, запросов слишком много, а количество одновременных запросов браузера ограничено, что сильно удлинит время загрузки веб-страницы, что не экономически эффективным;
  • Каждая маленькая иконка превращается вbase64изображение, а затем непосредственно написать код:
    • Преимущества: 1. Полностью отображать иконку 2. Уменьшить количество запросов;
    • Недостатки: 1. Картинки с насыщенными цветами превращаются вbase64Эффект нехороший 2. Увеличится упоминание картинки, что эквивалентно обмену времени загрузки на время запроса;

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

Категории