Maus
-
Posts
6 -
Joined
-
Last visited
Maus's Achievements
Explorer (1/14)
0
Reputation
-
Возникла проблема с @Media запросами - они просто не применяются! Вот HTML код страницы: <!DOCTYPE html> <html><head><title>Black Hog Games</title><meta charset="utf-8"><link type="text/css" rel="StyleSheet" href="/_st/my.css" /><link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_1024x600.css" /><link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_1280x800.css" /><link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_1280x1024.css"><link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_1366x768.css" /> <link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_1440x900.css" /> <link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_360x640.css" /><link rel="icon" href="/Black_Hog_Games/images/favic.ico" type="image/x-icon"> <body id="pages"> </body> И не один из привязных документов не работает! Работает только <link type="text/css" rel="StyleSheet" href="/_st/my.css" /> Вот пример кода одного из CSS документов со стилями - остальные такие точно, только цифры другие: @media screen and (min-width: 1280px) and (min-height: 1024px) { #Menu{ display: block; width: 100%; height: 50px; position: absolute; top: 36%; left: 0%; z-index:2;} #Text1 { font-family: Georgia, Arial, Tahoma; font-size: 250%; color: #097AAA; padding-top: 0px; text-align: center;} #Text2 { font-family: Georgia, Arial, Tahoma; font-size: 40px; color: #097AAA; padding-top: 10px; text-align: center;} #Text3 { font-family: Georgia, Arial, Tahoma; font-size: 17px; color: #FFFFFF; padding-top: 25px; padding-left: 15px; height: 115px; width: 840px;}} И в результате ничего Но когда я просматриваю свой сайт через http://quirktools.com и ставлю соответствующие разрешение то все работает Вот на 2 скриншоте Text1 зачеркнут и применен Text1 @Media Так почему же в браузере у меня это не происходит, что не так ? В чем ошибка?
-
Несколько CSS с разными @Media запросами к одному HTML
Maus replied to Maus's question in HTML Coding
Так каким же образом мне синхронизировать отображение @Media, что бы при нужном разрешении экрана выдавался нужный стиль? -
Несколько CSS с разными @Media запросами к одному HTML
Maus replied to Maus's question in HTML Coding
В том то и дело что в один все не влезет - он и так огромен а эти стили это еще + где-то 6000-7000 строк все вместе - приходиться делить на части -
Требуется что бы в зависимости от разного разрешения экрана менялись элементы на сайте, при этом я пытался привязать несколько CSS к одному HTML: <!DOCTYPE html> <html><head><title>Black Hog Games</title><meta charset="utf-8"> <link type="text/css" rel="StyleSheet" href="/_st/my.css" /><link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_1024x600.css" /><link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_1024x768.css" /> Документы привязались и все шло хорошо, пока не потребовалось межу ними переключаться: При проверке возникала путаница - включался не тот CSS, а самый первый - CSS_1024x600.css, а иногда подключеные CSS вообще отключались и работал только самый стандартный -/_st/my.css. Как сделать что бы в зависимости от размера экрана включался нужный CSS? Вот код CSS: @media only screen and (max-width: 1024px), and (max-height: 600px){ #Menu{ display: block; width: 100%; height: 50px; position: absolute; top: 27%; left: 0%; z-index:2;} #Home { display: block; width: 130px; height: 40px; float:left; padding-top: 2px; padding-left: 40px; }} @media only screen and (max-width: 1024px), and (max-height: 768px){ #Menu{ display: block; width: 100%; height: 50px; position: absolute; top: 20%; left: 0%; z-index:2;} #Home { display: block; width: 125px; height: 35px; float:left; padding-top: 2px; padding-left: 35px; }} В добавок ко всему он вместо @media only screen and (max-width: 1024px), and (max-height: 600px){ отображает @media only screen and (max-width: 1024px), not all
-
Действительно - поменял их местами вот так : #Home { display: block; width: 160px; height: 45px; float:left; padding-top: 2px; padding-left: 30px; } @media only screen and (max-width: 1000px){#Home { display: block; width: 130px; height: 30px; float:left; padding-top: 2px; padding-left: 10px; }} И все работает - спасибо вам большое!
-
Ребята - при верстке появилась такая проблема: У меня не работает @Media запросы - они просто перечеркиваются! Но если их вручную включить а ненужные выключить - все выглядит отлично! (Картинка сжимается и в общем все работает) Так как же мне сделать что-бы оно само отключало обычный тег и включало @Media при условии (max-width: 1000px)??? Вот код: HTML: <div id="Menu"><a href="http://blackhoggames.clan.su/" ><img src="/Black_Hog_Games/images/BottonHome.png" id="Home" class="Botton"></a> </div> </Menu> CSS: @media only screen and (max-width: 1000px){#Home { display: block; width: 130px; height: 30px; float:left; padding-top: 2px; padding-left: 10px; }} #Home { display: block; width: 160px; height: 45px; float:left; padding-top: 2px; padding-left: 10px;}