На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Управляем позицией элемента на разных экранах при помощи @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.



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



тегизаметки, css





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Обустройство крыши дома - этапы работы
Герои русских народных сказок в оригинальном формате


© upread.ru 2013-2020
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.