Изображения на мобильном адаптированном веб-сайте? - PullRequest
Новая
       28

Изображения на мобильном адаптированном веб-сайте?

0 голосов
/ 29 февраля 2012

Я создаю адаптированный для мобильных устройств веб-сайт Wordpress. Я использую медиа-запросы для ссылки на мобильный CSS-файл при просмотре на мобильном устройстве. Когда я публикую посты в своем блоге, изображения, очевидно, будут слишком большими для мобильного экрана. Как мне это решить?

Ответы [ 2 ]

1 голос
/ 13 декабря 2013

Хорошим решением является создание «сегментов» для экранов разных размеров и использование разных фоновых изображений на основе медиазапросов.

Например, вы можете создать 4 сегмента с шириной изображения:

  • 400px для 300-500px
  • 800px для 500-800px
  • 1200px для 800-1200px
  • 1400px для 1200px +

в CSSВы можете создавать медиазапросы, например, так: 

#elem {
    max-width: 100%;
}
@media all and (min-width: 300px) and (max-width: 500px) {
    #elem {
        background: url(../images/logo-400.jpg) left center no-repeat;
    }
}
@media all and (min-width: 500px) and (max-width: 800px) {
    #elem {
        background: url(../images/logo-800.jpg) left center no-repeat;
    }
}
@media all and (min-width: 800px) and (max-width: 1200px) {
    #elem {
        background: url(../images/logo-1200.jpg) left center no-repeat;
    }
}
@media all and (min-width: 1200px) {
    #elem {
        background: url(../images/logo-1400.jpg) left center no-repeat;
    }
}

Использование «min-width» и «max-width» гарантирует, что ваше устройство загружает только те изображения, которые соответствуют определенному «сегменту».

1 голос
/ 29 февраля 2012

Вы можете масштабировать ваши изображения, используя ниже css. 

img{
    max-width:100%;
}

Если вы не использовали видовой экран в вашем теге head, используйте это: 

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes" />

Приведенный выше код будетмасштабировать сайт в окне просмотра устройства. Если вы хотите остановить масштабирование, установите масштабируемый пользователем = Нет

...