![]() |
Управляем позицией элемента на разных экранах при помощи @media screenВ последнее время идет "мода" на мобильные версии сайтов и адаптивные дизайны. Не остается в стороне и мой блог читающего программиста. В заметке ниже рассмотрим, как немного приблизиться к адаптивности - позиционировать элемент в зависимости от разрешения экрана. Итак, лого блога (там вверху надпись "Блог читающего программиста"). Как видите, в обычном состоянии (имею в виду для компьютеров) лого смещено влево от края на 120 пикселей. Но если взять и посмотреть на меньшем разрешении (менее 900), то можно заметить довольно неприглядную картину: ![]() лого налезает на кружку. Избавиться от этого можно просто: добавив условие, чтобы при небольших разрешениях экранов у картинки пропадал отступ слева. То есть как-то так: <style> @media screen and (max-width: 900px) { #logo888 { padding-left: 0; } } </style>Не правда ли, все предельно просто? Кстати, проверить, как выглядит сайт при разных разрешениях можно быстро и бесплатно. Для этого есть как минимум три способа:
UPD Данная заметка немного устарела - сейчас дизайн моего блога изменился, но сам принцип использования неизменен - @media screen активно используется для адаптации сайтов. Кстати, если вам требуется адаптировать сайт, то я могу это сделать за небольшие деньги. Пишите up777up@yandex.ru. ![]() Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда. ![]() |
Мои услуги
|
© upread.ru 2013-2022 При перепечатке активная ссылка на сайт обязательна. |