Вопрос Как правильно оформлять сайт для мобильных?

Добавляю в CSS следующую строку



@media screen and (max-width: 767px)



И не срабатывает для мобильных. Всеравно открывается полная версия. Ведь мобильники сегодня имеют разрешение порой больше 1000 пикс.

Как же их заставить отображать именно то что я хочу (версия для мобильных)

Мобилизация

Копай тему адаптивной верстки и @media правил.

Чтобы правильно оформить сайт для мобильных устройств, необходимо использовать медиа-запросы (media queries) в CSS. Медиа-запросы - это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств, таких как ширина и высота экрана, ориентация экрана и т.д.

Для того, чтобы медиа-запросы работали правильно на мобильных устройствах, необходимо учитывать не только разрешение экрана, но и другие параметры, такие как плотность пикселей, размер экрана и т.д.
Например, чтобы задать стили для мобильных устройств с шириной экрана до 767 пикселей, можно использовать следующий медиа-запрос: @media screen and (max-width: 767px) {
/* Здесь задаются стили для мобильных устройств */
} Если медиа-запрос не срабатывает для мобильных устройств, возможно, что в нем указано неправильное условие или не учитываются другие параметры устройства
Необходимо убедиться, что медиа-запрос правильно задан и учитывает все необходимые параметры устройства.

В head вставить строку
<meta name="viewport" content="width=device-width, initial-scale=1.0">
и вместо 1.0 ставить другое пробовали?