Css vs Images

[rafinos]

Αλήθεια μήπως μπορείς να μου δώσεις ένα παράδειγμα εσύ για να δω μήπως τελικά κάνω εγώ κάποιο λάθος;

[jimex]

Για να μην κάνει wrap το κείμενο στο πρώτο ss μπορείς να χρησιμοποιήσεις το:

white-space: nowrap;

Ωστόσο το wrap του κειμένου σημαίνει κακή διαχείριση του οριζόντιου χώρου σου.

 

Επίσης στην περίπτωση του 2ου ss όλα εξαρτώνται από τα μεγέθη που χρησιμοποιείς. Αν φτιάξεις πχ. divs με ποσοστά τα οποία στην ιεραρχία που έχεις φτιάξει καταλήγουν να συνδέονται με το μέγεθος της οθόνης, διαφορετικής αναλογίας οθόνες θα σου δώσουν διαφορετικής αναλογίας κουμπιά.

 

Όσον αφορά τα καινούργια μεγέθη στη CSS3, αυτά δεν μπήκαν επειδή δε δούλευαν τα υπάρχοντα. Κάνουν εντελώς διαφορετικά πράγματα. Δηλαδή:

• Όπως σου είπα το em είναι αναλογία ως προς το default font size και το ex ως προς το ύψος ενός lowercase 'x'. Τα ποσοστά επίσης είναι αναλογία ως προς το μέγεθος του container του στοιχείου το οποίο αφορούν. Αυτό σημαίνει ότι τα δύο πρώτα θα βασιστούν σε αυτό που η rendering engine έχει ως default size. Το default size μπορεί να είναι 16px σε έναν desktop browser, μπορεί να είναι 40px σε μια high res screen και γενικά όλες οι rendering engines έχουν πλέον τρόπο να προσαρμόζονται σε high dpi screens. Αυτό σημαίνει ότι οτιδήποτε μετρηθεί σε em, θα είναι ανάλογο του default font size. Πρόσεξε, όχι ανάλογο του viewport size. Δηλαδή από τη στιγμή που ο browser θεωρεί πχ. πως σε μια τυπική desktop οθόνη των ~80ppi το font size σε pixel είναι 16, τότε ότι resize και να κάνεις στο παράθυρο του browser, το 1em δε θα μεταβληθεί. Το ίδιο θα συμβεί και σε μια 8Κ οθόνη, μονάχα που αντί για πχ. 16px, το default θα είναι κάτι πολύ μεγαλύτερο.
• Τα μεγέθη του CSS3 που αναφέρεις, αφορούν από την άλλη το μέγεθος του viewport. Δηλαδή, στο παραπάνω παράδειγμα, αν πας και κάνεις resize το παράθυρο του browser σε 10 * 10 pixels, τότε τα μεγέθη βάσης που θα χρησιμοποιηθούν θα γίνουν πολύ μικρά. Αντίστοιχα και αν μεγαλώσεις το παράθυρο τα μεγέθη θα γίνουν πολύ μεγάλα. Όλα αυτά στην ίδια οθόνη, με το ίδιο dpi. Εδώ δηλαδή, αυξάνεις την επιφάνεια εργασίας και όχι την πυκνότητα. Φυσικά τα συγκεκριμένα μεγέθη είναι πιο δυνατά από τα πρώτα και προσφέρουν περισσότερες και καινούργιες δυνατότητες. Φυσικά μπορούν να επιλύσουν και προβλήματα που επιλύονταν ήδη με τα προηγούμενα μεγέθη, όπως το δικό σου.

Οπότε για το ότι χάνεις τις αναλογίες εγώ στοιχηματίζω ότι έχεις το μέγεθος των κουμπιών σε ποσοστό επί της οθόνης και όταν αλλάζει η οθόνη χάνεις τις αναλογίες. Οι αναλογίες θα πρέπει να είναι με κάτι που αναλογικά παραμένει ίσο. Το 10em * 20em σε διαφορετικές συσκευές μπορείς να καταλαμβάνει διαφορετικό χώρο pixel, ωστόσο η αναλογία του θα διατηρηθεί στο 1/2. Χρησιμοποίησε em/ex για τα μεγέθη που θες να τηρούν κάποιες αναλογίες. Το ίδιο και για τα borders/paddings/margins κλπ. Ποσοστά χρησιμοποιείς για να τοποθετήσεις τα στοιχεία σου στην οθόνη. Όχι άμεσα για το μέγεθος τους.

 

Επίσης μπορείς να χρησιμοποιήσεις και media queries, τα οποία μπορούν να σου αλλάζουν και τη διάταξη σε vertical/horizontal mode και σε smartphone vs tablet. Περισσότερα σε κάποιo responsive design course.

 

Ελπίζω να το έπιασες. Δεν είμαι έτσι κι αλλιώς front end developer, οπότε τυχόν περίεργες τεχνικές που χρησιμοποιούνται σε edge cases δε τις γνωρίζω. Πάντως σίγουρα το πρόβλημα σου δεν αναφέρεται σε αυτές.

[rafinos]

Πάντως το φυσιολογικό είναι να δημιουργήσεις div me pixels ή % δε νομίζω πως τα em και τα ex να βοηθούν πολύ. Λες ότι τα em μένουν αναλογικά ίδια και δεν θα διαφωνήσω, αλλά όταν εγώ θέλω δύο κουμπιά και το καθένα να είναι ίσο με το 1/4 του parent div +border +padding και το parent το θέλω να είναι ίσο με 100% του width τότε νομίζω πως δεν μπορείς να παίξεις με em και ex γιατί πολύ απλά δεν μπορείς να γνωρίζεις πόσα em είναι το 100% του width για να παίξεις εξ αρχής με em. Άρα ή εσύ παρεξήγησες το τι ήθελα να κάνω και άρα ήταν λάθος οι προσεγγίσεις σου εξ αρχής, ή εγώ συνεχίζω να μην καταλαβαίνω τι μου λες πράγμα που δεν το αποκλείω. 

 

Όπως και να έχει σε ευχαριστώ πολύ για τον κόπο σου.