ब्राउज़ करें:385
एक उत्तरदायी वेबसाइट बनाना किसी भी फ्रंट-एंड डेवलपर के लिए एक आवश्यक कौशल है। एक प्रतिक्रियाशील वेबसाइट डिवाइस और स्क्रीन आकार के आधार पर अपने लेआउट और सामग्री को समायोजित करती है, जिससे सभी डिवाइसों पर एक शानदार उपयोगकर्ता अनुभव सुनिश्चित होता है। इस लेख में, हम आपको HTML और CSS का उपयोग करके एक बुनियादी प्रतिक्रियाशील वेबसाइट बनाने की प्रक्रिया के बारे में बताएंगे।
शुरू करने से पहले, आपको HTML और CSS की बुनियादी समझ होनी चाहिए। सीएसएस फ्लेक्सबॉक्स और मीडिया प्रश्नों से परिचित होना भी फायदेमंद होगा।
एक नया प्रोजेक्ट फ़ोल्डर बनाकर और निम्नलिखित फ़ाइलें जोड़कर प्रारंभ करें:
index.html खोलें और मूल HTML संरचना जोड़ें जो आप चाहते हैं, यह कुछ भी हो सकता है:
Responsive Website
My Responsive Website
Welcome to My Website
This is a simple responsive website built with HTML and CSS.
About Us
We provide excellent web development services.
Our Services
We offer a wide range of web development services.
Contact Us
Feel free to reach out to us for any inquiries.
इसके बाद, style.css फ़ाइल खोलें और कुछ बुनियादी शैलियाँ जोड़कर प्रारंभ करें:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
}
header h1 {
text-align: center;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
}
nav ul li {
margin: 0 1rem;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 2rem;
}
section {
margin-bottom: 2rem;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
position: fixed;
width: 100%;
bottom: 0;
}
वेबसाइट को उत्तरदायी बनाने के लिए, हम मीडिया प्रश्नों का उपयोग करेंगे। ये हमें स्क्रीन आकार के आधार पर विभिन्न शैलियाँ लागू करने की अनुमति देते हैं। निम्नलिखित मीडिया क्वेरीज़ को style.css में जोड़ें:
@media (max-width: 768px) {
nav ul {
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 0.5rem 0;
}
main {
padding: 1rem;
}
}
@media (max-width: 480px) {
header h1 {
font-size: 1.5rem;
}
nav ul li {
margin: 0.25rem 0;
}
main {
padding: 0.5rem;
}
}
एक वेब ब्राउज़र में Index.html खोलें और विभिन्न स्क्रीन आकारों के लिए लेआउट कैसे समायोजित होता है यह देखने के लिए ब्राउज़र विंडो का आकार बदलें। आपको नेविगेशन मेनू को लंबवत रूप से स्टैक करते हुए देखना चाहिए और जैसे-जैसे स्क्रीन की चौड़ाई कम होती जाती है, सामग्री के चारों ओर पैडिंग कम होती जाती है।
अब आपने HTML और CSS का उपयोग करके एक सरल प्रतिक्रियाशील वेबसाइट बना ली है! यह उदाहरण एक वेब पेज को संरचित करने और एक प्रतिक्रियाशील डिज़ाइन बनाने के लिए मीडिया प्रश्नों का उपयोग करने की मूल बातें शामिल करता है। जैसे-जैसे आप अधिक अनुभव प्राप्त करते हैं, आप अधिक जटिल और गतिशील लेआउट बनाने के लिए सीएसएस ग्रिड, फ्लेक्सबॉक्स और प्रतिक्रियाशील छवियों जैसी उन्नत तकनीकों का पता लगा सकते हैं।
बने रहें!!!
अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।
Copyright© 2022 湘ICP备2022001581号-3
