MediaQuery pytanie

Question

Witam wszystkich serdecznie :)

Od niedawna zaczęła się moja przygoda z tworzeniem stron internetowych i podczas jednego z projektu natrafiłem na problem, który mam nadzieje ktoś pomoże mi rozwiązać. 

Swoje pierwsze kroki z Bootstrapem stawiałem z kursem Bootstrap 3 - responsywne strony. W tym kursie autor na koniec projektu dopasowuje stronę właśnie przy pomocy MediaQuery takim oto kodem css: 

@media(min-width: 1200px){
	html{
		font-size: 60%;
		line-height: 1.2rem;
	}
}

@media(min-width: 992px) and (max-width: 1199px){
	html{
		font-size: 50%;
		line-height: 1.2rem;
	}
}

@media(min-width: 768px) and (max-width: 991px){
	html{
		font-size: 40%;
		line-height: 1.2rem;
	}
}

U mnie polecenie z html niestety nie działa - pytanie pierwsze dlaczego? Zamieniając html na ul > li wszystko śmiga ok - chociaż z o wiele wyższym progiem procentowym aniżeli tu pokazanym.

 

Drugie pytanie jakie chciałbym zadać tyczy się odnośnie stylizowania loga - standardowo, żeby było ono dobrze ustawione css został wystylizowany o tak: 

#logo{
	display: block;
	float: none;
	margin-top:-32px;	
}

W przypadku najmniejszej rozdzielczości (poniżej 768px) ustawienia te nie działają - nawet jeśli ustawie je na sztywno z MediaQuery i w momencie kiedy menu zwija się do przycisku złożonego z icon-bar`ów logo schodzi na dół (jakby margin-top: 0px;)

 

Z góry dziękuję za pomoc i przepraszam jeśli sprawa jest błaha :)

Answer 1

1. Nie styluj tagu HTML tylko np.  body. Wtedy powinno zadziałać.  Jeśli nie,  to wklej na np.  JS fiddle cały kod - poszukamy błędów.

2. Poczytaj o reset CSS.  Przeglądarki mają standardowy CSS,  który zakłada pewne marginesy.  Jest on niestety różny na różnych przeglądarkach,  a wygląda jeszcze inaczej na mobilnych. Dlatego warto zresetować ustawienia marginesów,  aby zniwelować te różnice.

Answer 2

1. MQ nie działają, bo AFAIR BS ustawia wszystkie wielkości czcionki osobno dla elementów i to dodatkowo w pikselach. Z tego powodu możesz sobie ustawić co chcesz na html, bo i tak to zostanie nadpisane.
2. Najlepiej, żebyś pokazał to live.

Answer 3

@media(min-width: 1200px){
    html{
        font-size: 60%;
        line-height: 1.2rem;
    }
}
 

Żeby ci ten kod się wykonał twoja rozdzielczość ekranu powinna być 1200px.

min-width:1200px - oznacza minimalna rozdzielczość ekranu (strony)

max-width:1200px - oznacza maksymalna rozdzielczość ekrany (strony)

gdybyś miał ustawione max-width:1200px to wtedy zdefiniowane style wyświetlały by się  do tej rozdzielczości.

Kwestia druga:

#logo{
    display: block;
    float: none;
    margin-top:-32px;   
}

 

przykład:

<div class="belka">

<span id="logo">Logo</span>

</div> 

dla klasy belka ustawiasz position:relative;

a dla  id ustawiasz  position:absolute;

wtedy ustawiasz względem diva o klasie belka

tak na koniec to nie styluj po ID a po Class ID do czegoś innego  służy od tego są Class-y

jak już wcześniej koleżanka wspomniała  wstaw cały kod gdybyś sobie z tym nie poradził to zerkniemy na twój kod.

Answer 4

Pierwszej części pytania jeszcze nie sprawdziłem, ale na pewno poczytam o restach w css.

 

Natomiast co do drugiego. Udało mi się uzyskać zamierzony efekt dla menu oprócz najmniejszej rozdzielczości (w której pojawia się menu rozwijane) przycisk stworzony z icon-barów podjeżdża do góry i po rozwinięciu nachodzi na logo. Próbowałem różnych znanych mi sztuczek, ale w momencie kiedy wystylizowałem poprawnie przycisk rozjeżdżał się inny element. Wrzucam poniżej html oraz css dla mojego menu.

<header id="menu" class="navbar-fixed-top">
	<div class="container">
		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<nav class="navbar navbar-inverse" role="navigation" id="pasek_nawi">
				<div>
					<div class="container-fluid">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#moje-menu">
                                <span class="sr-only">Nawigacja</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
							<div id="logo">
                                <a class="navbar-brand" href="http://www.4light.pl"><img src="img/4light70.jpg" class="img-responsive" alt=""></a>
                            </div>
						</div>
						<div class="collapse navbar-collapse" id="moje-menu">
							<ul class="nav navbar-nav navbar-right" id="nawigacja">
								<li class="active"><a href="#">Home</a></li>
								<li><a href="#aktualnosci">Aktualności</a></li>
								<li><a href="#pracownia">Pracownia</a></li>
								<li><a href="#produkty">Produkty</a></li>
								<li><a href="#realizacje">Realizacje</a></li>
								<li><a href="#kontakt">Kontakt</a></li>
							</ul>
						</div>
					</div>
				</div>
			</nav>
		</div>
	</div>
</header>

#menu{
	background-color: white;
}

.navbar{
	background-color: white;
	font-size: 14px;
	color: black;
	border-color: white;
}

.navbar-nav{
	padding-top: 18px;
}

.navbar-toggle{
	background-color: black;
}

.navbar-outer{
	width: 1200px;
}

.navbar-inverse .navbar-nav > li > a{
	color: black;
	margin-left: 15px;
	border: 2px solid transparent;
	line-height: 1px;
	font-weight: bold;
	border-radius: 8px;
}

.navbar-inverse .navbar-nav > .active > a{
	display: block;
	color: black;
	border-color: black;
	background-color: white;
	border-radius: 8px;
}

.navbar-inverse .navbar-nav > li > a:visited{
	color: black;
}

.navbar-inverse .navbar-nav > .active > a:visited{
	color: black;
	background-color: white;
}

.navbar-inverse .navbar-nav > li > a:hover{
	display: block;
	color: #663333;
	border: 2px solid transparent;
	border-color: #663333;
	line-height: 1px;
	font-weight: bold;
	border-radius: 8px;
	transition: all 0.7s ease;
}

.navbar-inverse .navbar-nav > .active > a:hover{
	background-color: white;
	color: #663333;
}	

#logo img{
	display: block;
	float: none;
	margin-top:-14px;	
}