responsive website

[Deadsell]

καλησπέρα σας

 

άρχισα να φτιάχνω το site μου responsive και χρησιμοποιώ αυτό για να είναι σε desktop 

@media only screen and (min-width:55,06 em){

 

}

και βάζω css Μέσα για να διαμορφώσω την σελίδα μου αλλά παρατήρησα οτι απο υπολογιστή σε υπολογιστή αλλάζει η διαμόρφωση

Πως μπορώ να διαμορφώσω την σελίδα μου για να πιάσω όλο το εύρος των υπολογιστών?

 

για smartphone χρησιμοποιώ αυτό

@media only screen and (max-width: 600px){

 

}

[rafinos]

Προσωπικά δεν ξέρω αν είναι και ο πιο σωστός τρόπος, αλλά συνήθως για τα pc που κατά ένα τεράστιο ποσοστό οι περισσότεροι έχουν οθόνη με πάνω από 1200px width δεν βάζω media-query. Επίσης, πως γίνεται να χρησιμοποιείς "px" για τα κινητά, αλλά "em" για τα pc; Έχεις σκεφτεί ότι μπορεί να πετύχεις οθόνη με ενδιάμεσο μέγεθος; Εκεί τι θα συμβεί;

[Deadsell]

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

Προσωπικά δεν ξέρω αν είναι και ο πιο σωστός τρόπος, αλλά συνήθως για τα pc που κατά ένα τεράστιο ποσοστό οι περισσότεροι έχουν οθόνη με πάνω από 1200px width δεν βάζω media-query. Επίσης, πως γίνεται να χρησιμοποιείς "px" για τα κινητά, αλλά "em" για τα pc; Έχεις σκεφτεί ότι μπορεί να πετύχεις οθόνη με ενδιάμεσο μέγεθος; Εκεί τι θα συμβεί;

για τις οθονες τι χρησιμοποιείς εσύ? πχ αν βάλω min-width 601 px θα είναι πιο σωστό? για να πιάσω όλο το ευρως των desktop

επίσης γνωρίζεις άλλον τρόπο πιο σωστό για να το κάνω αυτό αντι για media query?

[rafinos]

2 ώρες πριν, Deadsell είπε

για τις οθονες τι χρησιμοποιείς εσύ? πχ αν βάλω min-width 601 px θα είναι πιο σωστό? για να πιάσω όλο το ευρως των desktop

επίσης γνωρίζεις άλλον τρόπο πιο σωστό για να το κάνω αυτό αντι για media query?

Αν δεν χρησιμοποιησεις το πρωτο query ολα θα ισχυουν μεχρι να υπαρξει οθονη για τα media query με τα 600px και εκει θα ισχυσουν μονο τα οσα εχεις δηλωσει εκει. Οπότε νομίζω δεν χρειάζεται. Ωστοσο, πιστευω πως το min-width 601px ειναι καλυτερο απο τα em. Παντως εμενα μ' αρεσει να παίζω με %. Ίσως σε γλυτωσει απο πολλά media queries.

Περιμενε βεβαια και τη γνωμη καποιων πιο εμπειρων.

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

[Deadsell]

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

Αν δεν χρησιμοποιησεις το πρωτο query ολα θα ισχυουν μεχρι να υπαρξει οθονη για τα media query με τα 600px και εκει θα ισχυσουν μονο τα οσα εχεις δηλωσει εκει. Οπότε νομίζω δεν χρειάζεται. Ωστοσο, πιστευω πως το min-width 601px ειναι καλυτερο απο τα em. Παντως εμενα μ' αρεσει να παίζω με %. Ίσως σε γλυτωσει απο πολλά media queries.

Περιμενε βεβαια και τη γνωμη καποιων πιο εμπειρων.

μπορεις να μου στειλεις κανενα Link να δω πως δουλευει αυτο το % που προτιμάς εσύ ?

[rafinos]

3 ώρες πριν, Deadsell είπε

μπορεις να μου στειλεις κανενα Link να δω πως δουλευει αυτο το % που προτιμάς εσύ ?

Σόρρυ, επειδή σου απάντησα από κινητό και το έκανα κάπως βιαστικά ξέχασα να τονίσω ότι το % αναφέρεται στο "width" των elements κατά κύριο λόγο και όχι σε κάποιο media-query. 

Για παράδειγμα αν ένα div έχει width: 100%; τότε αυτό είναι πιάνει το 100% σε όλες τις διαστάσεις οθόνης. Είτε είναι κινητό, είτε οθόνη pc είτε οτιδήποτε. 

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

[Deadsell]

Στις 8/9/2019 στις 1:26 ΠΜ, rafinos είπε

Σόρρυ, επειδή σου απάντησα από κινητό και το έκανα κάπως βιαστικά ξέχασα να τονίσω ότι το % αναφέρεται στο "width" των elements κατά κύριο λόγο και όχι σε κάποιο media-query. 

Για παράδειγμα αν ένα div έχει width: 100%; τότε αυτό είναι πιάνει το 100% σε όλες τις διαστάσεις οθόνης. Είτε είναι κινητό, είτε οθόνη pc είτε οτιδήποτε. 

Κατάλαβα. Ίσως να αρχίσω να το δουλεύω έτσι . Απλά δεν μπορώ να καταλάβω γιατί διαφέρει η σελίδα που έφτιαξα από PC σε PC.. nasiselevators.gr

 

[theo93]

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

Κατάλαβα. Ίσως να αρχίσω να το δουλεύω έτσι . Απλά δεν μπορώ να καταλάβω γιατί διαφέρει η σελίδα που έφτιαξα από PC σε PC.. nasiselevators.gr

Ρίξε μια ματιά εδώ και εδώ

Επίσης ρίξε μια ματιά και στις γραμματοσειρές σου

 

 

 

Επεξ/σία 9 Σεπτεμβρίου 2019 από theo93

[παπι]

Ερωτηση, γιατι δεν το κανεις με bootstrap

[Deadsell]

Στις 10/9/2019 στις 7:25 ΜΜ, παπι είπε

Ερωτηση, γιατι δεν το κανεις με bootstrap

δεν το γνωριζω αυτο

[theo93]

8 ώρες πριν, Deadsell είπε

δεν το γνωριζω αυτο

Είναι ένα framework για css που θα σε βοηθήσει σε πολλά σημεία να μην ανακαλύπτεις τον τροχό ;)