@media работает крайне некорректно

@Uni_programist · Регистрация: 11.08.2016

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

Здравствуйте!
Начал учится работать с @media , даже наработки кое-какие есть, но по сути они работают или некорректно или вообще не работают, что из этих утверждений верно не знаю.
Помогите, пожалуйста, разобраться в этой нелегкой для меня задаче:
Есть страница HTML с приблизительно таким кодом:

HTML5

<!DOCTYPE html>
     <html>
         <head>
             <title>ЯП|Справочник|</title>
             <meta http-equiv="content-type" content="text/html; charset=UTF-8">
             <link rel="stylesheet" type="text/css" href="pascaldising.css">
         </head>
         <body>
             <div id="attention"><div id="image"></div><div id="atttext"><b><font color="#FFF">Внимание!</font></b> Эта страница может значительно отличаться от всех остальных! Методы конструирования на ней, и прочее!</div> </div>
             <div id="pascalb">
                 <div id="imganime"></div>
                 <div id="textbox">
                     <div id="textboxo" class="absolutec">Справочник</div>
                     <div id="moot" class="absolutec">
                         Pascal
                     </div>
                 </div>
             </div>
         </body>

И соответственно CSS код:

CSS

*{
    padding:0;
    margin:0;
}
#attention{
    background: rgba(255, 0, 0, 0.44);
    width: 100%;
    height: 55px;
    position: relative;
}
#image{
    background-image: url('/img/att.png');
    width:50px;
    height:40px;
    background-size: cover;
    position: absolute;
}
#atttext{
    position:relative;
    margin-left: 60px;
    font-size:20px;
    text-align:-webkit-center;
}
 
#imganime {
    display: block;
    background-image: url('/img/pascal.png');
    background-size: cover;
    border-radius: 100%;
    position: absolute;
    width: 15vh;
    height: 15vh;
    
}
#pascalb{
     position: relative;
     background: rgba(0, 21, 255, 0.3);
     width:100%;
     height: 15vh;
}
#textbox{
     position: relative;
}
#textbox>.absolutec{
     position: absolute;
}
#textboxo{
     right: 0px;
     font-size: 54px;
}
#moot{
     right: 0px;
     top: 45px;
     font-size: 24px;
}
@media screen and (max-height: 768px){
     #textbox>.absolutec{
         position: absolute;
     }
     #textboxo{
         right: 5px;
         font-size: 40px;
     }
     #moot{
         right: 0px;
         top: 45px;
         font-size: 24px;
     }
}

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

Сам @media , изначально имел следующий вид:

CSS

@media screen and (max-height: 568px){
     #textboxo{
         right: 5px;
         font-size: 40px;
     }
     #moot{
         right: 0px;
         top: 45px;
         font-size: 24px;
     }
}

Цель всех этих действий в том, что бы на мобильных устройствах слово "СПРАВОЧНИК" сжималось до font-size:30px.
Сейчас же, насколько вижу в консоли, все время работает @media, а поменяв значение max-height на 568px @media перестает работать почему-то.
Помогите разобраться с @media, пожалуйста. Может, если есть вариант получше (слышал, что это костыльный метод)?
Заранее благодарен!

@Academik · 18.09.2018, 23:29

Uni_programist, обычно в @media прописывают ширину устройства а не высоту.
Попробуйте так:

CSS

@media all and (max-width: 675px){
     #textboxo{
         right: 5px;
         font-size: 40px;
     }
     #moot{
         right: 0px;
         top: 45px;
         font-size: 24px;
     }
}

@gogolik · 19.09.2018, 08:23

Academik, высота может пригодиться, например, для узких планшетов. Чтоб с ориентациями экрана не мудрить, проще высоту использовать. А ещё лучше и ширину, и высоту. Для верности.

@Uni_programist · 19.09.2018, 16:50 **[ТС]**

Academik, спасибо, работает. Но один вопрос все таки задам.
Могу ли я объявить еще одну @media в случае надобности?

@Academik · 19.09.2018, 17:11

Uni_programist, конечно, что вам мешает.

@Uni_programist · 19.09.2018, 17:57 **[ТС]**

Academik, кстати, новая проблема @media не работает на мобильных устройствах, работает только при боковой консоли, как показано на скриншоте, а загружая страницу с помощью мобильного устройства не работает...
Пробовал добавить max-height: 768px не решает проблему...

@Academik · 19.09.2018, 20:20

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

Скиньте полный код css + html и конкретизируйте задачу.

@Uni_programist · 20.09.2018, 13:01 **[ТС]**

Academik, вот HTML код

HTML5

<!DOCTYPE html>
     <html>
         <head>
             <title>ЯП|Справочник</title>
             <meta http-equiv="content-type" content="text/html; charset=UTF-8">
             <link rel="stylesheet" type="text/css" href="pascaldising.css">
         </head>
         <body>
             <div id="attention"><div id="image"></div><div id="atttext"><b><font color="#FFF">Внимание!</font></b> Эта страница может значительно отличаться от всех остальных! Методы программирования на ней, и прочее!</div> </div>
             <div id="pascalb">
                 <div id="imganime"></div>
                 <div id="textbox">
                     <div id="textboxo" class="absolutec">Справочник</div>
                     <div id="moot" class="absolutec">
                         ЯП
                     </div>
                 </div>
             </div>
         </body>
     </html>

Вот CSS:

CSS

*{
    padding:0;
    margin:0;
}
#attention{
    background: rgba(255, 0, 0, 0.44);
    width: 100%;
    height: 55px;
    position: relative;
}
#image{
    background-image: url('/img/att.png');
    width:50px;
    height:40px;
    background-size: cover;
    position: absolute;
}
#atttext{
    position:relative;
    margin-left: 60px;
    font-size:20px;
    text-align:-webkit-center;
}
 
#imganime {
    display: block;
    background-image: url('/img/pascal.png');
    background-size: cover;
    border-radius: 100%;
    position: absolute;
    width: 15vh;
    height: 15vh;
    
}
#pascalb{
     position: relative;
     background: rgba(0, 21, 255, 0.3);
     width:100%;
     height: 15vh;
}
#textbox{
     position: relative;
}
#textbox>.absolutec{
     position: absolute;
}
#textboxo{
     left: 100px;
     font-size: 54px;
}
#moot{
     right: 420px;
     top: 35px;
     font-size: 20px;
}
@media all and (max-width: 1000px){
     #textboxo{
         right: 0px !important;
         font-size: 40px;
         text-align: -webkit-right;
     }
     #moot{
         right: 0px;
         top: 45px;
         font-size: 24px;
     }
}

Поставил на 1000 вроде бы сейчас с мобильного нормально загружается (как надо и явно видно, что работает), но может есть универсальное свойство @media, что бы с пикселями не заморачиваться?

@gogolik Модератор 2687 / 1759 / 760 Регистрация: 13.03.2010 Сообщений: 5,844
	19.09.2018, 08:23	3
	Academik, высота может пригодиться, например, для узких планшетов. Чтоб с ориентациями экрана не мудрить, проще высоту использовать. А ещё лучше и ширину, и высоту. Для верности. 1

@Uni_programist 4 / 3 / 2 Регистрация: 11.08.2016 Сообщений: 352
	19.09.2018, 16:50 [ТС]	4
	Academik, спасибо, работает. Но один вопрос все таки задам. Могу ли я объявить еще одну @media в случае надобности? 0

@Academik 1025 / 678 / 295 Регистрация: 04.04.2013 Сообщений: 2,709
	19.09.2018, 17:11	5
	Uni_programist, конечно, что вам мешает. 0

@Uni_programist 4 / 3 / 2 Регистрация: 11.08.2016 Сообщений: 352
	19.09.2018, 17:57 [ТС]	6
	Academik, кстати, новая проблема @media не работает на мобильных устройствах, работает только при боковой консоли, как показано на скриншоте, а загружая страницу с помощью мобильного устройства не работает... Пробовал добавить max-height: 768px не решает проблему... Миниатюры 0

@Academik 1025 / 678 / 295 Регистрация: 04.04.2013 Сообщений: 2,709
	19.09.2018, 20:20	7
	Uni_programist, в панели разработчика щелкните на иконку смартфона, в режиме адаптивного дизайна выберите устройство и тестируйте. Удобнее будет если панель отобразить внизу браузера а не сбоку. Скиньте полный код css + html и конкретизируйте задачу. 0

	20.09.2018, 13:01

@media работает крайне некорректно

Решение