Как сделать мобильную версию сайта?

Question

[artem20152000]

Ребят, вот допустим я делаю мобильную версию сайта и мне надо, чтобы все было в размере 540px... Как мне к этому придти? Я делаю все с помощью медиа..... Делаю тк, чтобы при максимальной ширине 540px подключался css файл, но что делать дальше, для того чтобы сайт уменьшился?

Answer 1

[Рост Осипов]

В своем .css файле пишешь строку:
@media only screen and (max-width: 540px)
и ниже прописываешь стили элементов, которые хочешь чтобы были изменены в мобильной версии.
h1, h2, p, divs. ets.
При загрузке страницы - если окно больше 540px - действуют стили, описанные раньше твоего медиа-запроса. Как только окно уменьшается до 540 и ниже - начинают вступать в силу стили которые ты указал в медиа-запросе.

Comments

[artem20152000]

Чувак, проблема такая, что пустота по краям появляется. Вот ссылка: www.websmash.net/mobile/1index.html

Если с телефона зайти то справа огромная полоса появится! Viewport юзал.... Не помогает:(

[Sergey]

artem20152000: Полоса справа появляется потому что у вас ширина дива с логотипом указана в пикселах.

media screen and (max-width: 540px)
.logo {
float: left;
width: 540px; /* Вот в этом месте */
margin-right: 2em;
margin-left: 8em;
margin-right: 200px;
}

[artem20152000]

baskserg: Ширина была 100%, но я исправил.... Что посоветуете?

[Sergey]

У вас цель отцентрировать логотип??

Если да, то тогда у класса logo выставляем ширину в 100%. Все марджины убираем и делаем выравнивание текста по центру. Изображение в таком случае будет по центру.
.logo { width: 100%; text-align: center; }

Если же у вас какие-то другие цели, то просто удалите свойство width вообще для стиля .logo