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

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

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

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

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

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

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

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

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

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

UPD

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

Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

заметки, css

Мои услуги

Обустройство крыши дома - этапы работы

Герои русских народных сказок в оригинальном формате

Неочевидный взлом сайта

Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru