Ειναι σωστός τρόπος για responsive div?

[Rpanagos]

Προσπαθωντας να κανω καποια div serponsive κατεληξα στο εξης.

Φτιαχνω ενα div class και του δηλωνω στο css καποια max width και width ωστε να το κανω responsive.

Και μετα ενα αλλο class ωστε να το συμπεριλαβω στο πανω div.οπου σε αυτο το class εχω το περιεχομενο που θελω για το div.
και αυτο το class εχει max-width και width.

Μονο ετσι μπορω να πετυχω το div να ειναι responsive.



Αλλα δεν μου φαινετε και ο ποιο σωστος τροπος.

Θα μπορουσα κατευθειαν να φτιαξω ενα div που το περιεχομενο του να ειναι repsponsive?Οσες φορες προσπαθησα με ενα class η εικονα που ηθελα να βαλω δεν ηταν responsive.

[Haldol]

Ψάξε τι είναι τα media queries. 
 
Μοιάζουν κάπως έτσι:
 

@media only screen and (max-width: 594px)
{
	// Code.
}

[Rpanagos]

 

Ψάξε τι είναι τα media queries. 

 

Μοιάζουν κάπως έτσι:

 

@media only screen and (max-width: 594px)
{
	// Code.
}

Οκ θα το κοιταξω.

 

Οποτε τροπος με ενα div και να ειναι responsive αυτο και το περιεχομενο του δεν υπαρχει ετσι?

Θα πρεπει να εχω 2 class ή τον τροπο που μου ειπες?

[Haldol]

Δε χρειάζονται 2 classes. Τα media queries μπορού να εφαρμόσουν διαφορετικό CSS αναλόγως της συσκευής από την οποία προβάλλεται η σελίδα. Έτσι, μπορείς να έχεις ένα οριζόντιο flexbox σε οθόνη > 1024px, αλλά το ίδιο να γίνεται κάθετο (χωρίς επιπλέον class ή άλλο selector) μόλις πέσεις κάτω από αυτή την τιμή.

[Rpanagos]

Δε χρειάζονται 2 classes. Τα media queries μπορού να εφαρμόσουν διαφορετικό CSS αναλόγως της συσκευής από την οποία προβάλλεται η σελίδα. Έτσι, μπορείς να έχεις ένα οριζόντιο flexbox σε οθόνη > 1024px, αλλά το ίδιο να γίνεται κάθετο (χωρίς επιπλέον class ή άλλο selector) μόλις πέσεις κάτω από αυτή την τιμή.

Α μαλιστα,

νομιζω ειναι καλυτερο αυτο.

 

Απλα δεν μπορουσα να πετυχω (ουτε ακομα ξερω πως)σε μια class να κανω το div responsive..βαζω with 100% και max-width 1080 πχ αλλα αν βαλω μια εικονα θα μου την βαλει οσο ειναι οι διαστασεις της.

[tzotzosgr]

Γιατί δεν παίζεις με bootstrap

 

responsive image

img {
    width: 100%;
    height: auto;
}

[Rpanagos]

 

Γιατί δεν παίζεις με bootstrap

 

responsive image

img {
    width: 100%;
    height: auto;
}

 

Χμμμ.......Και πως δηλωνω σε ποια εικονα να κανει τα παραπανω?

[tzotzosgr]

<img src="image.png" alt="">

[Rpanagos]

Για μια εικονα,αν θελω και αλλες?
 

[tzotzosgr]

διάβασε html css

αυτό που με ρωτάς είναι πολύ απλό... 

αυτό που σου είπα πιο πάνω είναι για όλες τις εικόνες

[Rpanagos]

 

διάβασε html css

αυτό που με ρωτάς είναι πολύ απλό... 

αυτό που σου είπα πιο πάνω είναι για όλες τις εικόνες

 

Μισο,

για ολες τις εικονες δινω width: 100%;

height: auto;

 

Αν θελω για καποια συγκεκριμμενη φανταζομαι δεν δουλευει ετσι?

Χωρις να της βαλω class ...νομιζω δουλευει για ολες τις εικονες του σιτε.

 

 

 

Δε χρειάζονται 2 classes. Τα media queries μπορού να εφαρμόσουν διαφορετικό CSS αναλόγως της συσκευής από την οποία προβάλλεται η σελίδα. Έτσι, μπορείς να έχεις ένα οριζόντιο flexbox σε οθόνη > 1024px, αλλά το ίδιο να γίνεται κάθετο (χωρίς επιπλέον class ή άλλο selector) μόλις πέσεις κάτω από αυτή την τιμή.

Το κοιταξα λιγο.

 

Νομιζω ειναι ο καλυτερος τροπος αυτος..

 

Σε ευχαριστω πολυ!

[exarhis]

Όταν λέει Bootstrap εννοεί αυτό https://getbootstrap.com/.

Δες τα παραδείγματα, είναι ένα "εργαλείο" που βοηθάει να φτιάξεις responsive web sites.

 

Για να κάνεις responsive 2 div

<div class="container">
<div class="col-md-6">
The first div
</div>
<div class="col-md-6">
The second div
</div>
</div>