idontgetit
@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*/
  • Вопрос задан
  • 3631 просмотр
Решения вопроса 1
lamer350
@lamer350
กำลังสูงสุด
<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.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы