सीएसएस में मीडिया क्वेरी के माध्यम से ब्लॉकों का पुनर्गठन

आइए सीखते हैं कि विभिन्न स्क्रीन चौड़ाई पर ब्लॉकों का पुनर्गठन कैसे करें। उदाहरण के लिए, इस तरह का व्यवहार लागू करते हैं:

सबसे पहले अपने ब्लॉकों का HTML कोड लिखते हैं:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
</div>

अब हमारे ब्लॉकों के parent के लिए स्टाइल लिखते हैं:

.parent {
	display: flex;
	width: 90%;
	margin: 50px auto;
	border: 1px solid red;
}

अब स्वयं ब्लॉकों के लिए स्टाइल लिखते हैं, उन गुणों को निर्दिष्ट किए बिना जो मीडिया क्वेरी द्वारा बदले जाएंगे:

.child {
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid green;
}

बड़ी स्क्रीन चौड़ाई पर, ब्लॉकों के बीच का अंतराल स्वचालित रूप से गणना की जानी चाहिए:

@media (min-width: 500px) {
	.parent {
		justify-content: space-between;
	}
}

अंतराल के लिए जगह छोड़ने के लिए अपने ब्लॉकों की चौड़ाई 50% से थोड़ी कम निर्धारित करते हैं:

@media (min-width: 500px) {
	.child {
		width: 49.5%;
	}
}

छोटी स्क्रीन चौड़ाई पर, अपने ब्लॉकों को एक कॉलम में व्यवस्थित करते हैं:

@media (max-width: 500px) {
	.parent {
		flex-direction: column;
	}
}

उन्हें नीचे का मार्जिन देते हैं:

@media (max-width: 500px) {
	.child {
		margin-bottom: 10px;
	}
}

सब कुछ एक साथ इकट्ठा करते हैं और निम्नलिखित कोड प्राप्त करते हैं:

.parent {
	display: flex;
	width: 90%;
	margin: 50px auto;
}
.child {
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid green;
}

@media (max-width: 500px) {
	.parent {
		flex-direction: column;
	}
	.child {
		margin-bottom: 10px;
	}
}
@media (min-width: 500px) {
	.parent {
		justify-content: space-between;
	}
	.child {
		width: 49.5%;
	}
}

नीचे दिए गए उदाहरण को दोहराएं: