Css не работает media – Почему могут не работать CSS медиа запросы под определенные разрешения? — Хабр Q&A

Leave a Comment / Css / By /

не срабатывает @media у сайта — HTML, CSS

Помогите решить проблему не могу понять почему когда я тещу сайт на ПК при уменьшении экрана работает @media, а на телефоне не срабатывает.
<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <title>Портфолио</title>
   <link href="css/home.css" rel="stylesheet">
   <link href="img/favicon.png" rel="icon" type="images/png">
   <!--fonts--> <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Merriweather|Noto+Sans|Song+Myung" rel="stylesheet"> <!--/fonts-->
</head>
<body>
   <div>
      <h2>тест</h2>
      <h3>тест</h3>
   </div>
   <div>
      <div>
         <h3>тест</h3>
      </div>
      <div>
         <div>
            <img alt="тест" src="img/B2_1.jpg"> <a href="about_me.html">
            <h4>тест</h4></a>
         </div>
         <div>
            <img alt="тест" src="img/B2_2.jpg"> <a href="мои проекты/my_projects(all).html">
            <h4>тест</h4></a>
         </div>
      </div>
   </div>
   <div></div>
   <div>
      <div>
         <div>
            <p>тест</p>
            <p>тест</p>
            <p><br></p>
         </div>
         <div>
            <p>Мои профили в социальных сетях:</p><a href="" target="_blank"><img alt="VK" src="https://png.icons8.com/color/50/000000/vk-com.png"></a> <a href="#" target="_blank"><img alt="Fb" src="https://png.icons8.com/color/50/000000/facebook.png"></a> <a href="#"><img alt="Tw" src="https://png.icons8.com/color/40/000000/twitter.png"></a>
         </div>
      </div>
   </div>
</body>
</html>
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: #000;
}
h2 {
    margin: 0;
}
.clear {
    clear: both;
}
.B1 {
    background-color: #000;
    height: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Merriweather', serif;
}
.heder {
    font-size: 56px;
    margin-top: -50px;
}
.slogan {
    font-size: 32px;
    margin-top: 26px;
}
.portfolio {
    font-size: 30px;
    text-align: center;
    padding: 60px 0;
    font-family: 'Merriweather', serif;
}
.container {
    text-align: center;
    font-size: 21px;
    font-family: 'Song Myung', serif;
}
.txt {
    display: inline-block;
    margin: 40px
}
#img {
    border: 1px solid black;
}
.B3 {
    width: 100%;
    height: 60%;
    background-color: #000;
    color: #fff;
    padding-top: 60px;
}
.opisal {
    display: inline-block;
    margin: 40px;
}
@media screen and (max-width: 915px) {
    .B3{
            height: 70%;
    }
    .txt {
        margin: 10px;
        margin-top: 20px;
    }
    .opisal {
        margin: 20px;
        margin-top: 10px;
    }
}

css — Почему @media не работает?

Stack Overflow на русском

Loading…

  2. 0
  3. +0
    • Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
    • Справка Подробные ответы на любые возможные вопросы
    • Мета Обсудить принципы работы и политику сайта
    • О нас Узнать больше о компании Stack Overflow
    • Бизнес Узнать больше о поиске разработчиков или рекламе на сайте

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

Медиа запросы работают, когда добавляю их в в 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*/

media queries — Не работают медиа запросы css

Stack Overflow на русском

Loading…

  2. 0
  3. +0
    • Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
    • Справка Подробные ответы на любые возможные вопросы
    • Мета Обсудить принципы работы и политику сайта
    • О нас Узнать больше о компании Stack Overflow
    • Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
  6. Войти

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *