Как правильно настроить размер изображения в адаптивном дизайне для мобильных устройств? - PullRequest
Новая
       0

Как правильно настроить размер изображения в адаптивном дизайне для мобильных устройств?

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

Я работаю на нескольких мобильных веб-сайтах. Я хочу, чтобы они хорошо выглядели на стандартных дисплеях 320 x 480 и на дисплеях Retina 640 x 960. Поэтому я создал изображения, чтобы они хорошо выглядели на дисплее 640 x 960, и я использую отзывчивые css для увеличения размера изображений. Я делаю успехи, и заголовок сайта очень близок: просмотр мобильной страницы

Единственная проблема в том, что справа находится 1-2 пикселя мертвого пространства. Примечание. Это более очевидно на мобильном устройстве, чем в веб-браузере с измененным размером.

Вот HTML: 

<ul id="header">
    <li id="full-site-link"><a href="index.html"><img src="/images-mobile/btn_head-full.png" alt="btn_head-full" /></a></li>
    <li id="mobile-logo"><a href="/"><img src="/images-mobile/btn_head-logo.png" alt="btn_head-logo" /></a></li>
    <li id="mobile-search"><a href="/mobile/search"><img src="/images-mobile/btn_head-search.png" alt="btn_head-search" /></a></li>
</ul>

Вот CSS: 

#wrapper            { max-width: 480px; }

ul#header           { width: 100%; margin:0; padding:0; }
ul#header li        { display: inline; margin: 0; padding: 0; }
ul#header li a      { float:left; margin-bottom: -3px; padding:0; }

ul#header li#full-site-link a   { width: 21.71875%; }  /* 139 / 640 */
ul#header li#mobile-logo a      { width: 56.5625%;  }  /* 362 / 640 */
ul#header li#mobile-search a    { width: 21.71875%; }  /* 139 / 640 */

ul#header li a img      { max-width:100%; margin: 0; padding: 0; border: none; }

Если я смогу просто избавиться от неприятной строки справа от поиска, я буду в хорошей форме.

Спасибо!

1 Ответ

2 голосов
/ 21 февраля 2012

На мой взгляд, вы поступаете неправильно. Ваши изображения кнопок и логотип должны быть прозрачными, а градиент фона должен быть применен с помощью CSS или отдельно 1px & times; Изображение размером 139 пикселей, в зависимости от ваших требований к поддержке браузера.

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

...