Responsive web design

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
nirvana
Δημοσιεύσεις: 241
Εγγραφή: 01 Σεπ 2005 18:28
Τοποθεσία: Αγ. Παρασκευή

Responsive web design

Δημοσίευση από nirvana » 14 Οκτ 2011 17:51

Έκανα προχθές ένα γρήγορο search στο forum για responsive web design και μου έκανε εντύπωση ότι δεν βρήκα κάτι και είπα να κάνω ένα αντίστοιχο post. Επειδή ασχολούμαι πολύ λίγο με αυτό το σκηνικό (2-3 μέρες). Μπορεί να μου ξεφύγει κάποια ανακρίβεια οπότε διορθώστε με.

Τι είναι: κάνουμε responsive web design γιατί το site που έχουμε σχεδιάσει παίζει πολύ καλά στην στάνταρ οθόνη του pc μας αλλά έχει πολλές ατέλειες όταν θα το δούμε σε ένα tablet, smartphone ακόμα και netbook ή σε μία πολύ μεγάλη οθόνη.

Πώς: Με τα CSS media queries αλλάζουμε για συγκεκριμένες αναλύσεις κάποια rules.

Ακολουθεί ένα πολύ απλό παράδειγμα για την κλασσική οθόνη μας με μία μόνο παραλλαγή για μικρότερη ανάλυση. Για να γίνει πιο σωστό πρέπει να το κάνουμε το ίδιο για αρκετές αναλύσεις ή για portrait και landsape (οταν γυρνάμε το κινητό τούμπα), αλλά η λογική είναι η ίδια.

Ξεκινάμε με ένα πολύ απλό html και css (2 στήλες, ένα header και ένα footer και πλάτη με επι τοις 100)

Κώδικας: Επιλογή όλων

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http&#58;//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div id="container">
		<div id="header">
			<h1>Logo for my website</h1>
		</div>
		<div id="main">
			<div id="content">
				<div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a, 
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed, 
accumsan nec turpis. Nulla gravida tortor a lacus dignissim aliquet eget eget erat. Duis 
tincidunt leo ac metus mattis mollis. Proin magna quam, gravida vitae scelerisque sed, imperdiet 
at est. Vestibulum eget velit a turpis pharetra mollis a quis metus. Aliquam erat volutpat. Nam 
tincidunt adipiscing lobortis. 
				</div>  <!-- #post -->
				<div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a, 
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed, 
accumsan nec turpis. Nulla gravida tortor a lacus dignissim aliquet eget eget erat. Duis 
tincidunt leo ac metus mattis mollis. Proin magna quam, gravida vitae scelerisque sed, imperdiet 
at est. Vestibulum eget velit a turpis pharetra mollis a quis metus. Aliquam erat volutpat. Nam 
tincidunt adipiscing lobortis. 
				</div>  <!-- #post -->
				<div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a, 
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed, 
accumsan nec turpis. Nulla gravida tortor a lacus dignissim aliquet eget eget erat. Duis 
tincidunt leo ac metus mattis mollis. Proin magna quam, gravida vitae scelerisque sed, imperdiet 
at est. Vestibulum eget velit a turpis pharetra mollis a quis metus. Aliquam erat volutpat. Nam 
tincidunt adipiscing lobortis. 
				</div>  <!-- #post -->
			</div>  <!-- #content -->
			<div id="sidebar">
				<div class="side-box">
<h2>About me</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a, 
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed, 
accumsan nec turpis. 
				</div>  <!-- sidebox -->
				<div class="side-box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a, 
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed, 
accumsan nec turpis. 
				</div>  <!-- sidebox -->
			</div>  <!-- sidebar -->
		</div>
		<div id="footer">
			<div id="footer-hidden-for-small">Copyright © Nikos Korompos</div>
			<div id="footer-hidden-for-large"><h2>About me</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a, 
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed, 
accumsan nec turpis. </div>
		</div>  <!-- footer -->
	</div>  <!-- container -->
</body>
</html>
και το style μας:

Κώδικας: Επιλογή όλων

* 		&#123; margin&#58;0; padding&#58;0; border&#58;0; &#125;
body		&#123; color&#58; #535353; background&#58; #e7e7e7; &#125;
#container	&#123; width&#58; 80.83%; margin&#58; 0 auto; &#125;
#content 	&#123; width&#58; 61.85%; float&#58;left; &#125;
#sidebar	&#123; width&#58; 25.77%; float&#58;right; &#125;
#header	        &#123; color&#58; #e8e8e8; background&#58; #5e5e5e; padding&#58; 5px 8px; &#125;
.post 		&#123; margin&#58; 50px 0; padding&#58; 10px; background&#58; #f6f6f6; &#125;
.side-box	&#123; position&#58; relative; margin&#58; 50px 0; padding&#58; 10px; background&#58; #f6f6f6; &#125;
#footer 	&#123; clear&#58; both; color&#58;#e8e8e8; background&#58; #5e5e5e; &#125;
#footer	#footer-hidden-for-large &#123; display&#58; none; &#125;
και βγαίνει ένα πολύ όμορφο άσχημο :p αποτέλεσμα:

Εικόνα

Έστω ότι θέλουμε να γίνει λίγο πιο responsive το πράγμα. Πρέπει να πάρουμε κάποιες αποφάσεις. Π.χ εγώ αποφάσισα ότι θα κάνω κάποιες μικροαλλαγές αν αυτός που βλέπει το site έχει ανάλυση εώς 740px πλάτος. Αρχικά θα κρύψω την δεξιά στήλη. Όμως το about είναι σημαντικό να μην χαθεί. Θα το πάω στο footer και θα πετάξω το copyright.

Αφού όμως χαθεί το sidebar θα πρέπει να μεγαλώσω τα post μου στο 100% αλλιώς θα έχει κενό στα δεξιά. Τέλος για να φάινεται λίγο καλύτερα το logo μου θα το κεντράρω. (Οι αλλαγές μπορεί να μην είναι οι καλύτερες, αλλά για παράδειγμα είναι κομπλέ).

Πώς θα τα κάνω αυτά; Ένα media query και μέσα θα κάνω overright τα προηγούμενα rules. Άρα στο τέλος του stylesheet βάζω:

Κώδικας: Επιλογή όλων

@media &#40;max-width&#58; 740px&#41; &#123;
	#sidebar&#123; display&#58;none; &#125;
	#content &#123; width&#58; 100%; &#125;
	#header &#123; text-align&#58; center; &#125;
	#footer	#footer-hidden-for-large &#123; display&#58; inline; &#125;
	#footer	#footer-hidden-for-small &#123; display&#58; none; &#125;
&#125;
Οπότε κανονικά θα φαίνεται η πάνω εικόνα, ενώ αν κάνουμε resize το παράθυρο (ή μπούμε από ένα ipad) θα φαίνεται αυτό:

Εικόνα

Edit: ξέχασα να πώ ότι το about δεν έφυγε από το sidebar και πήγε εκεί. Όπως φαίνεται και στο css υπάρχουν από την αρχή και τα δύο απλά όταν εξαφανίζουμε το 1 (display: none;) εμφανίζουμε το άλλο (display: inline;)

Εδώ μπορείτε να βρείτε ένα δείγμα css με πολλές διαφορετικές αναλύσεις για να παίζετε.

2-3 site που είναι υλοποιημένα resonsively για έμπνευση:

http://ethanmarcotte.com/
http://css-tricks.com/
http://thinkvitamin.com/

Αν έχετε κάποιο trick επιπλέον ή κάποιο όμορφο resonsive site κάντε ένα post να το μοιραστείτε. :)

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 411
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Responsive web design

Δημοσίευση από apsuh0s » 14 Οκτ 2011 19:16

Πρέπει να σου ξέφυγε κάτι στο css..

Κώδικας: Επιλογή όλων

#footer   #footer-hidden-for-large &#123; display&#58; none; &#125; 
Και γιατί να γράψεις στο markup σου 2 about me και δεν το κάνεις έτσι;

Κώδικας: Επιλογή όλων

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http&#58;//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style>
*       &#123; margin&#58;0; padding&#58;0; border&#58;0; &#125;
body      &#123; color&#58; #535353; background&#58; #e7e7e7; &#125;
#container   &#123; width&#58; 80.83%; margin&#58; 0 auto; &#125;
#content    &#123; width&#58; 61.85%; float&#58;left; &#125;
#sidebar   &#123; width&#58; 25.77%; float&#58;right; &#125;
#header           &#123; color&#58; #e8e8e8; background&#58; #5e5e5e; padding&#58; 5px 8px; &#125;
.post       &#123; margin&#58; 50px 0; padding&#58; 10px; background&#58; #f6f6f6; &#125;
.side-box   &#123; position&#58; relative; margin&#58; 50px 0; padding&#58; 10px; background&#58; #f6f6f6; &#125;
#footer    &#123; clear&#58; both; color&#58;#e8e8e8; background&#58; #5e5e5e; &#125;
@media &#40;max-width&#58; 740px&#41; &#123;
   #sidebar&#123; width&#58; 100% &#125;
   #content &#123; width&#58; 100%; &#125;
   #header &#123; text-align&#58; center; &#125;
&#125; 
</style>
</head>
<body>
   <div id="container">
      <div id="header">
         <h1>Logo for my website</h1>
      </div>
      <div id="main">
         <div id="content">
            <div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a,
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed,
accumsan nec turpis. Nulla gravida tortor a lacus dignissim aliquet eget eget erat. Duis
tincidunt leo ac metus mattis mollis. Proin magna quam, gravida vitae scelerisque sed, imperdiet
at est. Vestibulum eget velit a turpis pharetra mollis a quis metus. Aliquam erat volutpat. Nam
tincidunt adipiscing lobortis.
            </div>  <!-- #post -->
            <div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a,
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed,
accumsan nec turpis. Nulla gravida tortor a lacus dignissim aliquet eget eget erat. Duis
tincidunt leo ac metus mattis mollis. Proin magna quam, gravida vitae scelerisque sed, imperdiet
at est. Vestibulum eget velit a turpis pharetra mollis a quis metus. Aliquam erat volutpat. Nam
tincidunt adipiscing lobortis.
            </div>  <!-- #post -->
            <div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a,
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed,
accumsan nec turpis. Nulla gravida tortor a lacus dignissim aliquet eget eget erat. Duis
tincidunt leo ac metus mattis mollis. Proin magna quam, gravida vitae scelerisque sed, imperdiet
at est. Vestibulum eget velit a turpis pharetra mollis a quis metus. Aliquam erat volutpat. Nam
tincidunt adipiscing lobortis.
            </div>  <!-- #post -->
         </div>  <!-- #content -->
         <div id="sidebar">
            <div class="side-box">
<h2>About me</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a,
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed,
accumsan nec turpis.
            </div>  <!-- sidebox -->
            <div class="side-box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a,
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed,
accumsan nec turpis.
            </div>  <!-- sidebox -->
         </div>  <!-- sidebar -->
      </div>
      <div id="footer">
         <div id="footer-hidden-for-small">Copyright © Nikos Korompos</div>
      </div>  <!-- footer -->
   </div>  <!-- container -->
</body>
</html> 
edit:

Εκτός κι αν το έκανες έτσι για να παρουσιάσεις ουσιαστικά αυτή τη δυνατότητα. Το να κρύβεις και να εμφανίζεις συναρτήσει της ανάλυσης. Οπότε πάσο :)
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
nirvana
Δημοσιεύσεις: 241
Εγγραφή: 01 Σεπ 2005 18:28
Τοποθεσία: Αγ. Παρασκευή

Responsive web design

Δημοσίευση από nirvana » 15 Οκτ 2011 02:19

Ναι για αυτό το έκανα :)

Άλλοστε όπως εξηγησα παραπάνω, ούτε αυτό είναι το απόλυτο design, ούτε και το responsive css το καλύτερο δυνατόν. Αλλά για χάριν του παραδείγματος νομίζω ότι δείχνει ότι χρειάζεται..

Άβαταρ μέλους
grigorakis4
Δημοσιεύσεις: 126
Εγγραφή: 16 Οκτ 2012 14:15
Τοποθεσία: ATHENS
Επικοινωνία:

Responsive web design

Δημοσίευση από grigorakis4 » 28 Απρ 2016 11:38

ξαχάσατε το meta <meta name="viewport" content="width=device-width, initial-scale=1">
Εικόνα

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες