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

Odpowiedz Nowy wątek
2015-09-29 13:33
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:)

Nadawaj wątkom sensowne tematy. Ten nie był ani sensowny, ani nie do końca po polsku. - dzek69 2015-09-30 12:39

Pozostało 580 znaków

2015-09-29 13:40
Mały Lew
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.

Pozostało 580 znaków

2015-09-29 13:59
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 :(

Pozostało 580 znaków

2015-09-29 15:01
0

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

Pozostało 580 znaków

2015-09-29 16:09
0

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

Pozostało 580 znaków

2015-09-29 21:05
Zimny Kot
0

Polecam zainteresować się jednostkami relatywnymi w CSS.

Pozostało 580 znaków

2015-09-30 12:14
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.

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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