Как подключить все медиа запросы через отдельный css файл?

Question

Дмитрий @idontgetit

Начинающий дед

Как подключить все медиа запросы через отдельный css файл?

Медиа запросы работают, когда добавляю их в в less файл и они потом компилируются в styles.css, но при этом я не могу подключить медиа запросы отдельный файлом. Пробовал разные способы, и через импорт и разными способами link, но ничего не работает

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

	<link rel="stylesheet/less" href="css/styles.less">
	<link rel="stylesheet" href="css/styles.css">
	<link rel="stylesheet" href="css/media.css" media="only screen and (max-width:840px)">
	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap" rel="stylesheet"> <!--roboto-->
	<title>
		Boots4 project
	</title>
</head>
<body>

@media only screen and (max-width:1450px){
	nav a{
		font-size: 18px;
		margin-left:20px;
	}

} /*1450px*/
@media only screen and (max-width:1010px){
	nav a{ 	
		margin-left:15px;
	}

	.search{
		display: none;
	}
	

} /*1010px*/
@media only screen and (max-width:840px){
	.logo{
		font-size: 18px;
	}
	nav a{ 	
		margin-left:10px;
		font-size: 15px;
	}

	.header-main{
		.title{
		font-size: 50px;
		}
		
		.full-btn{
			margin-top:20px;
			width: 150px;
			height: 50px;	
			font-size: 15px;	
		}
		.border-btn{
			margin-top:20px;
			width: 150px;
			height: 50px;
			font-size: 15px;
		}
    }
} /*840px*/
@media only screen and (max-width:490px){
	.header-main{
		.full-btn{
			display: block;
			width: 90%;
		}
		.border-btn{
			display: block;
			width: 90%;
		}
	}
} /*490px*/

Вопрос задан более трёх лет назад
3783 просмотра

13 комментариев

Подписаться Простой 13 комментариев

Сергей delphinpro @delphinpro Куратор тега CSS

а смысл?

Написано более трёх лет назад
Дмитрий @idontgetit Автор вопроса

Сергей delphinpro, Чтобы медиазапросы были на отдельной полке. Мне проще работать, когда все разложено, а не в одном файле

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

Дмитрий, я об использовании атрибута media в теге.
У вас медиазапросы описаны в файле, ни к чему этот атрибут. Просто подключите файл.

Написано более трёх лет назад
Дмитрий @idontgetit Автор вопроса

Сергей delphinpro, А, ну я это нашел в нескольких источниках, могу даже ссылки кинуть. Я сначала и подключил просто как css файл, но не работает почему то. Путь, название - все это я уже проверял. Less не может перебивать как то ? Навряд ли конечно..

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

Дмитрий, а зачем вы подключаете style.less и style.css ?
Я думаю стоит определиться — либо ваши стили будут компилироваться в браузере, либо подключаться уже скомпилированные.
Для того что бы работал первый вариант (style.less) я не вижу у вас подключенного компилятора (less.js).

Складывается ощущение, чтобы вы пока вообще не понимаете что делаете :))

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

Дмитрий, вы media-запросы подключаете после основных стилей? Иначе они работать не будут нормально.

Написано более трёх лет назад
Дмитрий @idontgetit Автор вопроса

Рустам Байназаров, да, после основных

Написано более трёх лет назад
Дмитрий @idontgetit Автор вопроса

Сергей delphinpro, подключенный style.less давно надо было удалить, просто как только начал разбираться с LESS подключил и забыл. Да, пока я в этом не очень силен, а лесс выбрал для некоторых удобных фишек. Как происходит мой процесс работы с less: Я пишу код в файле лесс, потом через программу Koala он компилируется в css код, который находится в style.css и именно этот файл и подключен к html документу. Я не знаю, правильно это или нет, но у меня все работает, а подключенный less, как уже писал, нужно просто удалить

Написано более трёх лет назад
Дмитрий @idontgetit Автор вопроса

Сергей delphinpro, так у вас есть предположения, почему медиа запросы не хотят работать в отдельном файле ?

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

Дмитрий, ссылку дайте на ресурс, иначе все будут только гадать на кофейной гуще. Вариантов множество.

Написано более трёх лет назад
Дмитрий @idontgetit Автор вопроса

Рустам Байназаров, Я думаю, что поищу сейчас ответ сам. Чисто для проверки создал новую структуру веб странички и подключил медиа отдельным файлом. Все прекрасно работает.

Написано более трёх лет назад

Дмитрий @idontgetit Автор вопроса

Весь код

<code lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap" rel="stylesheet"> <!--roboto-->
	
	<link rel="stylesheet" href="css/styles.css">
	<link rel="stylesheet" href="css/media.css">
	
	<title>
		Boots4 project
	</title>
</head>
<body>
	<header> 
		<nav class="navbar navbar-expand-md header-nav"> <!--навигация-->
			<div class="container-fluid">
				<a href="#" class="logo">
					LOGOTYPE
				</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
					<span class="navbar-toggler-icon">
						<i class="fas fa-bars"></i>
					</span>	
				</button>
			<div class="collapse navbar-collapse" id="navbarResponsive">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item">
						<a href="#" class="nav-link">Home</a>
					</li>

					<li class="nav-item">
						<a href="#" class="nav-link">About</a>
					</li>

					<li class="nav-item">
						<a href="#" class="nav-link">Servicing</a>
					</li>

					<li class="nav-item">
						<a href="#" class="nav-link">Portfolio</a>
					</li>

					<li class="nav-item">
						<a href="#" class="nav-link">Blog</a>
					</li>
					<li class="nav-item">
						<a href="#" class="nav-link">
							Contact us
						</a>
					</li>
				</ul>
			</div>
				<form class="form-inline my-2 my-lg-0 search">
      				<input class="form-control-sm mr-sm-2" type="search" placeholder="Search" aria-label="search">
     			 	<button class="btn btn-md align-middle btn-outline-secondary btn-search" type="submit">
     			 		<i class="fas fa-search"></i>
     			 	</button>
   				 </form>
			</div>
		</nav> <!--end навигация-->
		<!-- header-main -->
		<section class="header-main">
			<div class="headline">
				<h1 class="title">
					Web development project
				</h1>
				<p class="sub_title">
					Very suitable to support all web development projects
				</p>
				<button type="button" class="btn  border-btn">Our services</button>
				<button type="button" class="btn  full-btn">Hire is now</button>
			</div>
		</section>
	</header>
	
	
			





	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
</code>

@import url('../css/fonts.css');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100%;
  height: 100vh;
}
header {
  width: 100%;
  height: 100vh;
}
.header-nav {
  width: 100%;
  height: 10%;
}
.header-main {
  color: #fff;
  background: url(../img/bg/header-bg.png) no-repeat center;
  background-size: cover;
  width: 100%;
  height: 90%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: center;
}
.logo {
  font-size: 25px;
  font-weight: 700;
}
nav a {
  color: #000;
  font-size: 20px;
  font-weight: 600;
  margin-left: 45px;
}
.header-main {
  text-align: center;
}
.header-main .title {
  font-size: 70px;
  font-weight: 600;
  margin-bottom: 30px;
}
.header-main .sub_title {
  font-size: 22px;
}
.header-main .full-btn {
  margin-top: 50px;
}
.header-main .border-btn {
  margin-top: 50px;
}
.full-btn {
  font-family: 'Roboto', sans-serif;
  border: none;
  border-radius: 0;
  background: #008A7B;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 700;
  width: 200px;
  height: 60px;
  margin: 20px;
  color: #fff;
}
.border-btn {
  font-family: 'Roboto', sans-serif;
  border: 3px solid #fff;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 700;
  width: 200px;
  height: 60px;
  margin: 20px;
  color: #fff;
}

@media only screen and (max-width:1450px){
	nav a{
		font-size: 18px;
		margin-left:20px;
	}

} /*1450px*/
@media only screen and (max-width:1010px){
	nav a{ 	
		margin-left:15px;
	}

	.search{
		display: none;
	}
	

} /*1010px*/
@media only screen and (max-width:840px){
	.logo{
		font-size: 18px;
	}
	nav a{ 	
		margin-left:10px;
		font-size: 15px;
	}

	.header-main{
		.title{
		font-size: 50px;
		}
		
		.full-btn{
			margin-top:20px;
			width: 150px;
			height: 50px;	
			font-size: 15px;	
		}
		.border-btn{
			margin-top:20px;
			width: 150px;
			height: 50px;
			font-size: 15px;
		}
    }
} /*840px*/
@media only screen and (max-width:490px){
	.header-main{
		.full-btn{
			display: block;
			width: 90%;
		}
		.border-btn{
			display: block;
			width: 90%;
		}
	}
} /*490px*/

Написано более трёх лет назад

Сергей delphinpro @delphinpro Куратор тега CSS
Дмитрий, предположение одно — файл некорректно подключен. пути не те, или он отсутствует.

<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/media.css">

Это должно работать
Написано более трёх лет назад

Решения вопроса 1

2 комментария

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

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

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

PHP

+2 ещё

Простой
Когда логин повторяется, появляется пустой экран, в то время как должно появиться «Данный пользователь уже зарегистрован»?
- 1 подписчик
- час назад
- 21 просмотр
0

ответов
PHP

+2 ещё

Простой
Как скрыть раздел «Войти или зарегистрироваться» после входа на сайт?
- 1 подписчик
- час назад
- 34 просмотра
2

ответа
HTML

+3 ещё

Простой
Почему появляется горизонтальная прокрутка на мобильном (overflow включен)?
- 1 подписчик
- 13 часов назад
- 59 просмотров
1

ответ
HTML

+3 ещё

Простой
Где и как найти переменные локальной игры на html5?
- 1 подписчик
- 22 часа назад
- 72 просмотра
1

ответ
HTML

+1 ещё

Простой
Почему дублируются изображения?
- 1 подписчик
- вчера
- 71 просмотр
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 208 просмотров
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 23 нояб.
- 110 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 112 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 114 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 81 просмотр
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Копия форума на XenForo 2 + автоматический парсинг нового контента

26 нояб. 2024, в 17:25

30000 руб./за проект

SЕО продвижение сайта в топ 1

26 нояб. 2024, в 16:51

1000 руб./за проект

Сделатьт дизайн лендига и сверстать его на Тильде

26 нояб. 2024, в 16:49

30000 руб./за проект

Сергей delphinpro, Чтобы медиазапросы были на отдельной полке. Мне проще работать, когда все разложено, а не в одном файле
Дмитрий, я об использовании атрибута media в теге.
У вас медиазапросы описаны в файле, ни к чему этот атрибут. Просто подключите файл.
Сергей delphinpro, А, ну я это нашел в нескольких источниках, могу даже ссылки кинуть. Я сначала и подключил просто как css файл, но не работает почему то. Путь, название - все это я уже проверял. Less не может перебивать как то ? Навряд ли конечно..
Дмитрий, а зачем вы подключаете style.less и style.css ?
Я думаю стоит определиться — либо ваши стили будут компилироваться в браузере, либо подключаться уже скомпилированные.
Для того что бы работал первый вариант (style.less) я не вижу у вас подключенного компилятора (less.js).

Складывается ощущение, чтобы вы пока вообще не понимаете что делаете :))
Дмитрий, вы media-запросы подключаете после основных стилей? Иначе они работать не будут нормально.
Рустам Байназаров, да, после основных
Сергей delphinpro, подключенный style.less давно надо было удалить, просто как только начал разбираться с LESS подключил и забыл. Да, пока я в этом не очень силен, а лесс выбрал для некоторых удобных фишек. Как происходит мой процесс работы с less: Я пишу код в файле лесс, потом через программу Koala он компилируется в css код, который находится в style.css и именно этот файл и подключен к html документу. Я не знаю, правильно это или нет, но у меня все работает, а подключенный less, как уже писал, нужно просто удалить
Сергей delphinpro, так у вас есть предположения, почему медиа запросы не хотят работать в отдельном файле ?
Дмитрий, ссылку дайте на ресурс, иначе все будут только гадать на кофейной гуще. Вариантов множество.
Рустам Байназаров, Я думаю, что поищу сейчас ответ сам. Чисто для проверки создал новую структуру веб странички и подключил медиа отдельным файлом. Все прекрасно работает.
Дмитрий, предположение одно — файл некорректно подключен. пути не те, или он отсутствует.

<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/media.css">

Это должно работать

Answer 1 · 2019-05-19 15:08:14

<link rel="stylesheet" href="css/media.css" media="only screen and (max-width:840px)">

Вы тут указали что максимальная ширина 840, а в медиа запросах у вас есть 1450 - соответственно этот код и не будет работать.
Это первое, а второе - у вас ошибка в css, собственно после ошибки стили выполнятся не будут все что ниже.
Вы использовали в медиа запросах структуру вложенности что не допустимо для css, это вам не less.
Выполнение стилей дошло вот до этих строк и прекратилось:

@media only screen and (max-width:840px){
.....
.header-main{
    .title{
    font-size: 50px;
    }
....
...
}

Потому собственно код и работает если импортируете его в less, так как он его компилит. А отдельно он не будет работать так как нарушена структура CSS.

Answer 2 · 2019-05-19 13:53:49

Евгений Залецкий @JZ_52

<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

Ответ написан более трёх лет назад

Комментировать

Как подключить все медиа запросы через отдельный css файл?

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

Минуточку внимания

Войдите на сайт