Можно ли масштабировать навигационные значки для адаптивного дизайна?

Таким образом, я масштабировал изображения с использованием свойства max-width, но мне интересно, можно ли добиться такого же эффекта на значках навигационных изображений? Можно ли это сделать с помощью спрайтов изображений или что было бы рекомендуемым методом?

3 ответа

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

/* Smartphones (portrait) ----------- */
 @media only screen 
 and (max-width : 320px) {
 #navIcon {
 background-image:url('small.jpg');
 }
 }


/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
 #navIcon {
 background-image:url('normal.jpg');
 }
}


Это зависит от того, сколько вы хотите изменить свой макет, и если вам нужно соответствовать определенным требованиям поставщика (например, рекомендации Apple)

У меня был веб-сайт, где все изображения меню были одинаковой высоты, и использовали линейный макет, если на более широком экране.

В тот момент, когда вы меняли его на меньший экран, я включил специфический размер и размещение @media для значков меню. Например, я хотел, чтобы они складывались, и я хотел, чтобы они составляли 42 пиксела (что говорит Apple - минимальный размер экрана для сенсорных экранов)

Для рабочего стола у меня была определенная ширина и высота, установленные на "авто", а для более узкого экрана у меня была определенная высота (42 пикселя), а ширина - "авто".

Я, как правило, не хочу полагаться на несколько изображений, потому что с течением времени он становится более сложным. Фактически, я прекратил использовать изображения для своих меню и сделал все, используя css (для меня не было монотонных изображений спрайтов). Я использую домашний веб-шрифт dingbat, который очень хорошо масштабируется)


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

Вы также можете использовать и делать высоту 100%.

Я бы порекомендовал то, что предложил Крис.

licensed under cc by-sa 3.0 with attribution.