Почему не получается использовать @media only screen?

Когда вставляю в код сайта @media only screen и задаю значения для блоков, ничего не меняется, в чём проблема?

@media only screen and (max-width: 939px) {
	.wrap {
		width: 300px;
	}

	.regist {	width: 300px;}
}


<header class="header">
		<div class="top"><!--top-->
			<div class="wrap">
				<div class="logo">
					<a href="/"></a>
				</div>
				<div class="head-menu">
					<ul>
						<li><a href="login/this_avto.php">Войти</a></li>
						<li><a href="login/register.php">Регистрация</a></li>
						<li><a class="two" href="#2">Как это работает?</a></li>
						<li><a class="two" href="#3">Часто задаваемые вопросы</a></li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
		</div><!--top-->
		<div class="wrap">
			<h1>Скачивай приложения</h1>
			<h1>и получай за это деньги</h1>
			<div class="regist"><!--regist-->
				<div class="text-bl">
				</div>
				<div class="include">
					
				</div>
			</div><!--regist-->
		</div>
	</header>
  • Вопрос задан
  • 2756 просмотров
Решения вопроса 1
twixoff
@twixoff
<meta name="viewport" content="width=device-width; initial-scale=1.0">

использовали?
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@ikeagold
Полезной будет статья из хабра про адаптивный дизайн habrahabr.ru/post/119127
Если надумаете отменить изменение масштаба то вот:
<meta name="viewport" content="width=device-width, user-scalable=no">

И статья про viewport frontender.com.ua/mobile-web/wtf-viewport
Ответ написан
Комментировать
Huf
@Huf Автор вопроса
Вот скриншоты:
Так отображается сайт
1e18438a07c4494e80ba204cc7605782.png
Мобильная версия:
55f76c508634420799aa265b67b64aa0.png

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

Войдите, чтобы написать ответ

Похожие вопросы