Jak skalować stronę (RWD) przy pomocy media queries?

0

Witam,

tworzę stronę internetową.Nie jakąś profesjonalną bo to moja pierwsza.Problem polega na tym że najpierw zrobiłem stronę (bez założenia że będzie skalowana)a teraz chce ją skalować i niestety ciężko mi to wychodzi.Ostatnio się dowiedziałem że strony robi się z zasadą "mobile first".Nie chce jej robić od początku tylko po prostu dodać do tego media queries.

Nie mogę zmienić w podanych elementach ani marginesów ani jakoś zwęzić tych elementów, zmniejszyć czcionki.Tylko i wyłącznie mogę manipulować opcją (width) ale też mi nie daje to efektów jakie bym chciał.

<div id="wrapper">
	

		<div id="h1"><!-- Menu -->
					<ul>

						<a href="#" id="sub"></a>
						<a href="https://twitter.com/" id="twitter"></a>
						<a href="https://www.facebook.com/" id="facebook"></a>
		 </div><!-- Logo Strony -->
				<div id="logo">
					<ul>
						<li class="LogoStrony"><a href="index.html">Logo strony</a></li>
						<li class="slogan"><a href="index.html">slogan</a></li>
				
					<div id="menu">
						<ul>
							<li class="Home"><a href="index.html">Home</a></li>
							<li class="About"><a href="about.php">About</a></li>
							<li class="Skateboarding"><a href="skate.php">Skateboarding</a></li>
							<li class="Portfolio"><a href="gym.php">Gym</a></li>
							<li class="Fight"><a href="fight.php">Fight</a></li>
							<li class="Contact"><a href="kontakt.php">Contact</a></li>
						</ul>
					</div>
 </div>
 
#wrapper {
 margin:0 auto;
 width:1280px; /*  Change to desired width :)  */
 text-align: center;
}
#h1{
background: url(../images/1.png);
width: 1280px;
height: 40px;
font-family: Myriad Pro;
font-size: 13pt;
margin: 0 auto;
}
#h1 ul{
color:#fff;
list-style:none;
margin-left:125px;
}
#h1 ul li{									/*ustawienie :listy...   */
text-shadow:3px 3px 3px #000;
float:left;
margin-top:12px;
margin-left:50px;
}
#h1 ul li a											/*odpowiednik linku(tu wpisujemy np.zeby nie bylo podkresleń)   */{
text-decoration:none;
color:#a4a4a4;
}
#h1 ul li a:hover{
text-decoration:none;
color:#ffc731;
}
#facebook
{
background:url(../images/facebook.png);							/*ikonki (ustawianie ikonek)   */
width:29px;
height:29px;
float:right;
margin-right:10px;
margin-top:5px;
display:block;
}

#facebook:hover
{
background:url(../images/facebook.png)0 29px;							/*krycie (wymiana ikonek)   */

}
#twitter {

background:url(../images/twitter.png);
width:31px;
height:31px;
float:right;
margin-right:10px;
margin-top:5px;
}
#twitter:hover
{
background:url(../images/twitter.png)0 31px;							

}
#sub							/*ikonki (ustawianie ikonek)   */
{
background:url(../images/sub.png);
width:29px;
height:29px;
float:right;
margin-right:20px;
margin-top:5px;
}
#sub:hover							/*krycie (wymiana ikonek)   */
{
background:url(../images/sub.png)0 29px;
}
#pasekNaGorze {
background:url(../images/pasekNaGorze.png);
width:960px;
height:50px;
font-family: Myriad Pro;
font-size: 12pt;
margin:0 auto;
outline:none;
float:right;
}
#pasekNaGorze ul{
color:#fff;
list-style:none;
}
#pasekNaGorze ul li										/*ustawienie :listy...   */
{
text-shadow:3px 3px 3px #000;
float:left;
margin-top:18px;
margin-left:40px;
}
#pasekNaGorze ul li a											/*odpowiednik linku(tu wpisujemy np.zeby nie bylo podkresleń)   */
{
text-decoration:none;
color:#a4a4a4;
}
#pasekNaGorze ul li a:hover{
text-decoration:none;
color:ffc731;
}
#logo{
background: url(../images/2.png);
width: 1280px;
height: 100px;
font-family: Myriad Pro;
font-size: 50pt;
margin: 0 auto;
}
#logo ul{
color:#fff;
list-style:none;
margin-left:125px;
}
#logo ul li{									/*ustawienie :listy...   */
text-shadow:3px 3px 3px #000;
float:left;
margin-left:40px;
}
#logo ul li.slogan{
font-size: 20pt;
font-family: Myriad Pro;
float:left;
margin-left:-200px;
margin-top:60px;
}
#logo ul li.slogan{
font-size: 20pt;
font-family: Myriad Pro;
float:left;
margin-left:-200px;
margin-top:60px;
}

#logo ul li a											/*odpowiednik linku(tu wpisujemy np.zeby nie bylo podkresleń)   */{
text-decoration:none;
color:#a4a4a4;
}
#menu{
font-family: Myriad Pro;
font-size: 13pt;
}
#menu ul{
color:#fff;
list-style:none;
margin-left:300px;
}
#menu ul li{									/*ustawienie :listy...   */
text-shadow:3px 3px 3px #000;
margin-top:40px;
margin-left:50px;
}
#menu ul li a{		
display:block;								/*odpowiednik linku(tu wpisujemy np.zeby nie bylo podkresleń)   */
text-decoration:none;
color:#a4a4a4;
outline:none;
}
#menu ul li a:hover{
text-decoration:none;
color:#ffc731;
}

i do tego chciałbym właśnie dodać media queries.Mam przygotowany taki już gotowy szkielet.Jeżeli chodzi o div "#h1 ul" to skalowanie działa dobrze ale innymi rzeczami nie mogę manipuować :)

*{box-sizing:border-box;}
@media (min-width: 1280px) {
#wrapper{width:1280px;}

#h1 ul{width:90%;}
/* ------------------------------------------------------------------------------------------------------------------------------------------------  */
}
@media (max-width: 1100px) and (min-width: 1000px) {
#wrapper {width:950px;}

#h1 ul {width:76%;}

/* ------------------------------------------------------------------------------------------------------------------------------------------------  */
}
@media (max-width: 1000px) and (min-width: 800px) {
#wrapper {width:750px;}

#h1 ul{width:67%;}
/* ------------------------------------------------------------------------------------------------------------------------------------------------  */
}
@media (max-width: 800px) and (min-width: 500px) {
#wrapper {width:450px;}

#h1 ul{width:52%;}
/* ------------------------------------------------------------------------------------------------------------------------------------------------  */
}
@media (max-width: 500px) {
#wrapper {width:90%;}

#h1 ul{width:30%;}

} 

Chodzi mi tez o to czy ten kod nie jest czasem tak napisany przeze mnie że właśnie może uniemożliwiać skalowanie :) Jak wcześniej wspomniałem to moja pierwsza strona więc rozumiem że może być bałagan:)

Proszę o pomoc:)

0

A sprawdziłeś jak to wygląda? Zobacz dla różnych szerokości, min. 320px. W Chromie w dev tools masz opcję do sprawdzania widoku na urządzeniach mobilnych, w Firefoksie również, ale nieco uboższe.

0

Tak sprawdzałem:) W Firefox po naciśnięciu skrótu klawiaturowego ctrl+shift+m właśnie pokazuje się okno z możliwością zobaczenia jak wygląda strona dla danej ilości pikseli i niestety nie mogę manipulować stworzonymi przeze mnie elementami :(

0

A nie lepiej Ci będzie bootstrapa zassac? Potem tylko dodajesz klasy...

0

z Bootstrapa nie korzystałem :( Ale też się chciałbym nauczyć w media queries tego:) Tylko maxymalnie dziwne to jest:)

0

Polecam zainteresować się jednostkami relatywnymi w CSS.

0

właśnie nie wiem jak tego bootstrapa zassac. Niby oglądam te kursy ale z gotowym projektem i zdjęciami to jest chyba ciężka sprawa.

1 użytkowników online, w tym zalogowanych: 0, gości: 1