Управляем позицией элемента на разных экранах при помощи @media screen

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

Итак, лого блога (там вверху надпись "Блог читающего программиста"). Как видите, в обычном состоянии (имею в виду для компьютеров) лого смещено влево от края на 120 пикселей. Но если взять и посмотреть на меньшем разрешении (менее 900), то можно заметить довольно неприглядную картину:



лого налезает на кружку. Избавиться от этого можно просто: добавив условие, чтобы при небольших разрешениях экранов у картинки пропадал отступ слева. То есть как-то так:

<style>
@media screen and (max-width: 900px) {
  #logo888 {     
    padding-left: 0;
}
}
</style>

Не правда ли, все предельно просто? Кстати, проверить, как выглядит сайт при разных разрешениях можно быстро и бесплатно. Для этого есть как минимум три способа:

1. Просто изменяйте окно своего браузера. Да-да, современные браузеры, в соответствии с указаниями стилей по-новому позиционируют элементы на странице при изменении размеров окна.


2. В браузере гугл хром нажимаем Ctrl+Shift+I, а затем, когда снизу откроется еще одно окно, жмем Ctrl+Shift+M и переходим в эмулятор экранов мобильных телефонов, планшетов - можно выбирать марки, разрешения.


3. Вот этот сервис, позволяющий просматривать свои и чужие сайты так, как будто они выглядят в разных компьютерах, планшетах и других смартфонах.

UPD

Данная заметка немного устарела - сейчас дизайн моего блога изменился, но сам принцип использования неизменен - @media screen активно используется для адаптации сайтов. Кстати, если вам требуется адаптировать сайт, то я могу это сделать за небольшие деньги. Пишите up777up@yandex.ru.