Ερώτηση για CSS και calc()

[philos]

Καλησπέρα!

Λοιπόν, έχω εντοπίσει κάποιες τιμές % για κάποια <li> μιας σελίδας (είναι πλέγμα εικόνων).

Ας πούμε αυτά για width 1920 είναι τα ιδανικά:

.thumb_tiny>li { max-width: calc(5% - 6px);}
.thumb_small>li { max-width: calc(10% - 6px);}
.thumb_medium>li { max-width: calc(16% - 6px);}
.thumb_large>li {max-width: calc(21% - 6px);}
.thumb_huge>li { max-width: calc(33% - 6px);}

Το θέμα είναι ότι αν η οθόνη είναι 4k, τα ιδανικά είναι το 50% των παραπάνω, δηλαδή 2.5%, 5% κτλ.

Πως μπορώ να εφαρμόσω αυτόν τον κανόνα της αναλογίας, χωρίς να βάλω ξέχωρο media query για 3840 ή όποια άλλη ανάλυση, αλλά να ακολουθείτε ανάλογα με το width του παραθύρου έχοντας ως βάση το παραπάνω για 1920;

Ίσως αν δουλέψει με την ίδια αναλογία και για width < 1920 θα βόλευε.

Παίζει να είναι εύκολο αλλά κάτι κουλά τύπου * 100vw/1920 δεν τα δέχεται η calc() κι εμένα με ενδιαφέρει το width του παραθύρου γιατί ο άλλος μπορεί να είναι σε 4k αλλά να έχει ένα μικρό παράθυρο στην οθόνη ανοιχτό

Επεξ/σία 23 Σεπτεμβρίου 2023 από philos

[rafinos]

Το calc((5%-6px)/(100vw/1920px))  δηλαδή δεν σου λειτουργεί; Πάντως το 100vw/1920px δεν θα το πρότεινα γιατί αν κάποιος έχει resized το παράθυρο τότε μπορεί να γίνει αχταρμάς. Το πιο σωστό είναι να έχεις ξεχωριστό media query. Εναλλακτικά υπάρχει και η λύση της javascript που ναι μεν θα κάνει ακριβώς ότι θέλεις αλλά θα φορτώνει λίγο πιο αργά. 

 

Επεξ/σία 24 Σεπτεμβρίου 2023 από rafinos

[philos]

7 ώρες πριν, rafinos είπε

Το calc((5%-6px)/(100vw/1920px))  δηλαδή δεν σου λειτουργεί; Πάντως το 100vw/1920px δεν θα το πρότεινα γιατί αν κάποιος έχει resized το παράθυρο τότε μπορεί να γίνει αχταρμάς. Το πιο σωστό είναι να έχεις ξεχωριστό media query. Εναλλακτικά υπάρχει και η λύση της javascript που ναι μεν θα κάνει ακριβώς ότι θέλεις αλλά θα φορτώνει λίγο πιο αργά. 

 

Υπάρχει κάτι αντίστοιχο του calc((5%-6px)/(100vw/1920px)) χωρίς το "vw" αλλά το size του παραθύρου;

Σε ευχαριστώ για την απάντηση!

[rafinos]

Μία λύση που δεν ξέρω αν βοηθάει θα ήταν να έχεις ως max-width στο parent div 1920px, ώστε να έχει ίδιο ακριβώς μέγεθος και στο full hd και στο 4k,  αλλά μάλλον αυτό δεν λύνει το πρόβλημά σου. 

Το θέμα είναι ότι εφόσον στο 1920px θέλεις να καταλαμβάνει συγκεκριμένο max-width που βγαίνει με βάση το % τότε θα πρέπει να καταλαμβάνει τον ίδιο χώρο και στο 3840px. 

Επεξ/σία 24 Σεπτεμβρίου 2023 από rafinos

[XPHSTOS_]

Καλησπέρα,

Little late to the party but here it is.
Τα συγκεκριμένα styles όπως τα βλέπω μάλλον προσπαθούν να προσομοιώσουν κάποιο grid και το -6px είναι για να γίνει compansate κάποιο gap.
Αν μιλάμε για περίπτωση grid, τότε πλέον δεν χρειάζονται τέτοια hacks.
Το gap παίζει και σε flex και σε column.

Τώρα, σε ότι αφορά το width της οθόνης και την ανάλυση της.
Long story short, δεν παίζει κανένα ρόλο... 
Τα % έχουν να κάνουν με το μήκος του parent element.
Αν για παράδειγμα κάποιο parent element έχει 1000px τότε το 25% στο child είναι 250px, αλλά αν ΔΕΝ βρίσκονται σε parent elements τα οποία έχουν margin, padding, width ή borders χωρίς box-sizing: border box τότε έχουν το ίδιο effect, και καλύτερο, με το vw.
Καλύτερο γιατί το vw, στα windows / linux ή γενικά όπου η scrollbar ΔΕΝ είναι με auto-hide τότε δημιουργούν horizontal scrolling και χρειάζεται ένα overflow-x: hidden σε κάποιο element, συνήθως στο body...

Τέλος, θα βοηθούσε ένα screenshot με το τι ακριβώς θέλεις να πετύχεις γιατί πράξεις όπως το 100vw / 1920px μου φαίνονται πολύ περίεργες.