Неправильно работает медиа - запрос

@r3v4ek · Регистрация: 02.08.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте.

Имеется следующий код:

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html>
      <head>
        <title>
        </title>
        <meta charset="utf-8">
        <link type="text/css" rel="stylesheet" href="css/style.css">
    <script src="js/script.js"></script>
      </head>
      
      <body>
       
        <div class="color-wraper">
          <div class="main-container">
              
            <header class="margin-bottom-15">
              
            </header>
 
            <main>
               <section class="main-nav-social margin-bottom-15">
                 <section class="main-nav"></section>
                 <section class="social"></section>
               </section>
               <section class="slider margin-bottom-15"></section>
               <section class="video margin-bottom-15"></section>
               <section class="repost margin-bottom-15"></section>
               <section class="foot-container">
                 <section class="feedback-news-request"></section>
                 <section class="caledar-stories-aboutus"></section>
               </section>
            </main>
 
          </div>
        </div>
        
      </body>

Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
 
a,
a:link,
a:active,
a:hover,
a:visitrd {
    text-decoration: none;
    color: inherit;
}
 
html,
body {
    text-align: center;
}
.color-wraper {
 background-color: #54647c;
}
 
.margin-bottom-15 {
  margin-bottom: 15px;
}
.color-wraper .main-container {
  width: 79.45205479452055%;
  max-width: 928px;
  padding-top: 105px;
  padding-bottom: 105px;
  margin: auto;
}
 
header {
  min-height: 60px;
  background-color: #ffffff;
}
 
 
 
main .main-nav-social {
  min-height: 675px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
 
.main-nav {
  background-color: red;
  flex-grow: 450;
  max-width: 464px;
  min-width: 250px;
  margin-right: 15px;
}
 
.social {
  background-color: green;
  flex-grow: 464;
  max-width: 450px;
  min-width: 200px;  
}
 
main .slider {
  background-color: yellow;
  min-height: 453px;
}
 
main .video {
  min-height: 300px;
  background-color: pink;  
}
 
main .repost {
  min-height: 300px;
  background-color: black;
}
 
main .foot-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  min-height: 1385px;
}
 
main .foot-container .feedback-news-request {
  background-color: gray;
  min-width: 200px;
  max-width: 615px;
  flex-grow: 300;
  margin-right: 15px;
}
 
main .foot-container .caledar-stories-aboutus {
  background-color: darkviolet;
  min-width: 400px;
  max-width: 615px;
  flex-grow: 615;
}
 
@media screen and (max-width:800px) {
  .main-nav, 
  main .foot-container .feedback-news-request {
    margin-right: 0;
  }
  
  main .foot-container .feedback-news-request {
    margin-bottom: 15px;
  }
  
}

Имеется следующий медиа-запрос:

Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
7
8
9
10
11
@media screen and (max-width:800px) {
  .main-nav, 
  main .foot-container .feedback-news-request {
    margin-right: 0;
  }
  
  main .foot-container .feedback-news-request {
    margin-bottom: 15px;
  }
  
}

Только начал учиться верстать и столкнулся с проблемой:

Медиа-запрос срабатывет, но не тогда когда нужно. Маргины меняются только когда ширина окна досгает ровно 3/4 от заданой максимальной ширины в медиа-запросе.

Заранее спасибо за помощь.

@mrBobrillo · 19.11.2015, 23:21

Ну правильно, margin будет срабатывать при разрешении экрана (max-width:800px), который и прописан в медиа запросе ...
В firefox инструментах разработчика есть адаптивный дизайн, вот там можно сжимать экран и наблюдать какая ширина экрана на данный момент

@r3v4ek · 19.11.2015, 23:32 **[ТС]**

Я уже этем воспльзовалься.

При заданом разрешении экрана (max-width:800px) медиа-запрос срабатывает когда ширина окна не 800px, а 600px.
Если (max-width:600px), то при ширине 450px.

@mrBobrillo · 19.11.2015, 23:33

Странно, у вас есть где показать сам сайт?

@r3v4ek · 19.11.2015, 23:45 **[ТС]**

Вот ссылка на сайт:
http://test.revstudio.com.ua/

Правда это только сетка.

@mrBobrillo · 19.11.2015, 23:48

Ну конечно, у вас ведь ширина стоит 80% у общего контейнера + max-width, вот какраз ширина в % и портит всю картину ...
При 800 ширине экрана убирается margin-right, разве не это нужно?

@r3v4ek · 19.11.2015, 23:57 **[ТС]**

Да, это было бы логично если бы (max-width:800px) задавался не экрану, а контейнеру.

Я убрал относительно заданую ширину у контейнера и все равно ничего не изменилось.

@mrBobrillo · 20.11.2015, 00:00

Ну дык медиаквери какраз и предназначены для ширины экрана, т.е, если ширина экрана 800 px, то блок с .class будет себя вести так то так то, вот такая логика, так что не удивляйтесь

@r3v4ek · 20.11.2015, 00:03 **[ТС]**

Все я понял.

У меня не правильно работает этот запрос только в Chrome.
В других браузерах все хорошо.

Спасибо, за помощь.

@mrBobrillo · 20.11.2015, 00:05

Да нет, в хроме все точно так же работает, в нем я и тестировал

Spirt Tesla · 20.11.2015, 13:54

совет-перекиньте js в конец,уменьшится время загрузки страницы.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	19.11.2015, 23:21
	Ну правильно, margin будет срабатывать при разрешении экрана (max-width:800px), который и прописан в медиа запросе ... В firefox инструментах разработчика есть адаптивный дизайн, вот там можно сжимать экран и наблюдать какая ширина экрана на данный момент 0

@r3v4ek 0 / 0 / 0 Регистрация: 02.08.2013 Сообщений: 27
	19.11.2015, 23:32 [ТС]
	Я уже этем воспльзовалься. При заданом разрешении экрана (max-width:800px) медиа-запрос срабатывает когда ширина окна не 800px, а 600px. Если (max-width:600px), то при ширине 450px. 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	19.11.2015, 23:33
	Странно, у вас есть где показать сам сайт? 0

@r3v4ek 0 / 0 / 0 Регистрация: 02.08.2013 Сообщений: 27
	19.11.2015, 23:45 [ТС]
	Вот ссылка на сайт: http://test.revstudio.com.ua/ Правда это только сетка. 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	19.11.2015, 23:48
	Ну конечно, у вас ведь ширина стоит 80% у общего контейнера + max-width, вот какраз ширина в % и портит всю картину ... При 800 ширине экрана убирается margin-right, разве не это нужно? 0

@r3v4ek 0 / 0 / 0 Регистрация: 02.08.2013 Сообщений: 27
	19.11.2015, 23:57 [ТС]
	Да, это было бы логично если бы (max-width:800px) задавался не экрану, а контейнеру. Я убрал относительно заданую ширину у контейнера и все равно ничего не изменилось. 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	20.11.2015, 00:00
	Ну дык медиаквери какраз и предназначены для ширины экрана, т.е, если ширина экрана 800 px, то блок с .class будет себя вести так то так то, вот такая логика, так что не удивляйтесь 0

@r3v4ek 0 / 0 / 0 Регистрация: 02.08.2013 Сообщений: 27
	20.11.2015, 00:03 [ТС]
	Все я понял. У меня не правильно работает этот запрос только в Chrome. В других браузерах все хорошо. Спасибо, за помощь. 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	20.11.2015, 00:05
	Да нет, в хроме все точно так же работает, в нем я и тестировал 0

Spirt Tesla 16 / 16 / 3 Регистрация: 03.01.2015 Сообщений: 115
	20.11.2015, 13:54
	совет-перекиньте js в конец,уменьшится время загрузки страницы. 0