Задать вопрос
@alex_terekhov
html

Как подключить медиа запросы?

Подскажите пожалуйста, есть шаблон на Joomla3
Хочу сделать его адаптивным
Подключаю медиа-запросы а они не работают (в head добавил meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> и подключил css media файл)
Подскажите как правильно это сделать
Код
<head>		    
 <jdoc:include type="head" />  	 	    
 <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/conversetlite/css/tdefaut.css" type="text/css" media="all" />   
 <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/conversetlite/css/box.css" type="text/css" media="all" />  
 <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/jquery.js"></script>   	  
 <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/superfish.js"></script>   
 <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/hoverIntent.js"></script> 
 <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/nivo.slider.js"></script>	 
 <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/scroll.js"></script>  
 <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/mootools.js"></script>   
 <script type="text/javascript" src="templates/<?php echo $this->template ?>/js/script.js"></script> 
 <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/conversetlite/css/media.css" type="text/css" media="max-width: 700px" />
 
 <link rel="icon" type="image/gif" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/favicon.gif" />	 
 <link href='http://fonts.googleapis.com/css?family=Oswald:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>  
 <link href='http://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
 
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 <meta name="viewport" content="width=device-width initial-scale=1.0"/>
 <link rel="stylesheet" href="media.css" media="max-width: 700px"/>
 <link rel="stylesheet" href="media.css" media="only screen and (max-width: 700px)"/>
 
<link rel="stylesheet" href="/templates/first-template/css/ddsmoothmenu.css" />
<script type="text/javascript" src="/templates/first-template/js/jquery.min.js"></script>
<script type="text/javascript" src="/templates/first-template/js/ddsmoothmenu.js"></script>
  • Вопрос задан
  • 7067 просмотров
2 комментария
Подписаться 1 Оценить 2 комментария
Решения вопроса 1
igorperegudov
@igorperegudov
Frontend-developer
В index.html добавляешь в head следующий код:
<meta name="viewport" content="width=device-width, initial-scale=1">


В файл стилей добавляешь следующее:

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
	
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

}
Ответ написан
7 комментариев
7 комментариев
Пригласить эксперта
Ответы на вопрос 2
a_u_sinitsin
@a_u_sinitsin
Либо написаны не правильно, либо подключены не последними.
Ответ написан
Комментировать
Комментировать
@archelon
не видя код, трудно сказать.
но для начала скажите, что у вас в head > meta name="viewport"
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Motion дизайн для гиф
25 апр. 2024, в 16:38
12000 руб./за проект
Написать посты на игровую тематику (PlayStation) Telegram, VK
25 апр. 2024, в 16:21
15000 руб./за проект
DevOps настройка Gitlab CICD для проекта c CF Worker
25 апр. 2024, в 16:12
2000 руб./за проект
Ещё заказы