Responsive κείμενο και εικόνες

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

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

Απάντηση
dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Responsive κείμενο και εικόνες

Δημοσίευση από dpa » 16 Ιαν 2014 18:21

Παιδιά πως μπορώ να κάνω responsive το κείμενο και τις εικόνες μιας ιστοσελίδας ??


όχι με τις ετικέτες μετά

απλά όταν κάνει resize το παράθυρο να κάνει και το κείμενο και τις εικόνες.


Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

Responsive κείμενο και εικόνες

Δημοσίευση από giannis17 » 16 Ιαν 2014 20:06

Τα media queries ναι είναι ο πατροπαράδοτος τρόπος και ίσως ο πιο σωστός (τρέχει πιο γρήγορα και για όσες αναλύσεις έχεις προνοήσει θα δείχνει ακριβώς όπως το θες), αλλά με το χάος των αναλύσεων που κυκλοφορεί και δεδομένου ότι μάλλον έχεις ήδη έτοιμη την ιστοσελίδα μπορείς να χρησιμοποιήσεις μια εφαρμογή jQuery όπως την FitText για να σου αυξομειώνει τα κείμενα σου ενώ για να κάνεις το ίδιο για τις εικόνες αρκεί να ορίσεις σε όλες είτε το width είτε το height σε 100% (όχι και τα 2) και να βρίσκονται μέσα σε block με συγκεκριμένες διαστάσεις (πχ ένα div με width:80%; )
"There is only one problem with common sense; it’s not very common."
– Milt Bryce

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Responsive κείμενο και εικόνες

Δημοσίευση από dpa » 16 Ιαν 2014 20:16

eyxaristo poly

mporeis na deis auto edw giati spaei apo kato to deutero div

http://jsfiddle.net/4d7rs/4/

auta ta css einai poly xalia olo provlimata

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

Responsive κείμενο και εικόνες

Δημοσίευση από giannis17 » 16 Ιαν 2014 21:08

κάθε εργαλείο είναι τόσο προβληματικό όσο ο χρήστης του.

Ο λόγος που "σπάει" το 2ο div είναι επειδή έχεις ορίσει width 300px σε περιεχόμενο πολύ μεγαλύτερο από 300px οπότε ότι περισσεύει το πάει από κάτω. αν αλλάξεις το width σε auto δεν θα το κάνει αυτό αλλά όσο μικραίνει ο χρήστης το παράθυρο/ανάλυση θα σπάει πάλι εκείνο το div.

Ίσως ο πιο όμορφος τρόπος για να κάνεις αυτό που θες είναι με ένα horizontal scroller όπως πχ αυτό : www.gcmingati.net/wordpress/wp-content/ ... imate.html

αν ψάξεις λίγο θα βρεις δεκάδες σαν αυτό, άλλα πιο χρηστικά, άλλα πιο όμορφα, άλλα πιο ακριβά...διαλέγεις και παίρνεις.
"There is only one problem with common sense; it’s not very common."
– Milt Bryce

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Responsive κείμενο και εικόνες

Δημοσίευση από dpa » 16 Ιαν 2014 21:13

Όταν κάνω resize το παράθυρο έχω το πρόβλημα.
Το έκανα με table και δουλεύει

αυτά τα css είναι χάλια σε μερικά πράγματα. Δεν μπορώ να το καταλάβω ένα τέτοιο πρόβλημα και να μην το έχουν λύσει.

Ευχαριστώ φίλε

Απάντηση

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

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

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