लेख निर्देशिका
मोबाइल रिस्पॉन्सिव सीएसएस अलग-अलग रिज़ॉल्यूशन के अनुसार अलग-अलग @मीडिया स्क्रीन रिस्पॉन्सिव लेआउट कैसे प्रदर्शित करता है?
निम्नलिखित लेख विभिन्न संकल्पों को निर्धारित करने के लिए सीएसएस का उपयोग करने और अनुकूली चौड़ाई प्राप्त करने के लिए विभिन्न चौड़ाई लेआउट प्रदर्शित करने का तरीका पेश करेगा।
जरूरतमंद मित्र इसका उल्लेख कर सकते हैं, मुझे आशा है कि यह सभी के लिए सहायक होगा।
@मीडिया और @मीडिया स्क्रीन प्रिंटिंग वेब पेजों के बीच अंतर
- यदि मुद्रण उपकरण में css का उपयोग करने की आवश्यकता है, तो @media का उपयोग करें, अन्यथा, @media स्क्रीन का उपयोग करें।
- हालांकि, यह जरूरी नहीं कि सच हो। वास्तव में, यदि आप "स्क्रीन" को "प्रिंट" से बदलते हैं और इसे @मीडिया प्रिंट के रूप में लिखते हैं, तो सीएसएस का उपयोग प्रिंटिंग डिवाइस पर किया जा सकता है;
- लेकिन ध्यान दें कि @media प्रिंट द्वारा घोषित css केवल प्रिंटिंग डिवाइस पर मान्य है।
1. डीआईवीसीएसएस छोटे मामले का विवरण
हमने सबसे पहले ".abc" नाम का एक DIV बॉक्स CSS सेट किया, इसकी ऊंचाई 300px पर सेट की, और CSS बॉर्डर को काला करने के लिए सेट किया;
- और सेटिंग्स
margin:0 autoलेआउट केंद्रित है, और ये दो शैलियाँ आसान देखने के लिए पूर्व-निर्धारित हैं।
हम चौड़ाई प्रदर्शित करने के लिए ब्राउज़र को मैन्युअल रूप से खींचते हैं, और फिर देखते हैं कि बॉक्स की चौड़ाई कैसे बदलती है:
- जब ब्राउज़र की चौड़ाई को 500px से अधिक की चौड़ाई में समायोजित किया जाता है, तो बॉक्स की चौड़ाई के अनुरूप 100px प्रदर्शित होता है;
- जब ब्राउज़र की चौड़ाई को 901px से कम समायोजित किया जाता है, तो बॉक्स की चौड़ाई के अनुरूप ".abc" प्रदर्शित होता है, जो 200px प्रदर्शित करता है;
- जब ब्राउज़र की चौड़ाई को 1201px से अधिक करने के लिए समायोजित किया जाता है, तो बॉक्स ऑब्जेक्ट की चौड़ाई 1200px प्रदर्शित होती है;
- जब यह 1200px से कम होता है, तो डिस्प्ले की चौड़ाई 900px होती है।
2, सीएसएस मोबाइल फोन मोबाइल टर्मिनल अनुकूली कोड
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */- यह ध्यान दिया जाना चाहिए कि सीएसएस कोड क्रम सीएसएस को बड़े से छोटे में टाइप कर रहा है (यह देखते हुए कि ब्राउज़र की चौड़ाई जितनी बड़ी होगी, सामने वाला उतना ही अधिक होगा)।
- यह तार्किक संबंध के कारण है, @ मीडिया का सीएसएस डिबगिंग का निर्णय निर्णय को विफल कर देगा।
3. एचटीएमएल कोड
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>नोट: डिवाइस-पहलू-अनुपात
- डिवाइस-पहलू-अनुपात का उपयोग विशिष्ट स्क्रीन पहलू अनुपात वाले उपकरणों को फिट करने के लिए किया जा सकता है, जो एक उपयोगी संपत्ति भी है।
- उदाहरण के लिए, हमारा पृष्ठ सामान्य स्क्रीन के लिए 4:3 के पहलू अनुपात के साथ एक शैली परिभाषित करना चाहता है।
- फिर 16:9 और 16:10 वाइडस्क्रीन के लिए, दूसरी शैली परिभाषित करें, जैसे अनुकूली चौड़ाई और निश्चित चौड़ाई:
- @मीडिया केवल स्क्रीन और (डिवाइस-पहलू-अनुपात: 4/3)
4. प्रमुख ब्राउज़रों के साथ संगत HTML+CSS+JS स्रोत कोड
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div>
</body>
</html>उपरोक्त मोबाइल टर्मिनल अनुकूली सीएसएस है, जो अलग-अलग स्क्रीन के अनुसार अलग-अलग @media स्क्रीन उत्तरदायी विस्तृत सामग्री प्रदर्शित करता है।
होप चेन वेइलियांग ब्लॉग ( https://www.chenweiliang.com/ ) साझा "मोबाइल एडेप्टिव सीएसएस डिफरेंट स्क्रीन डिस्प्ले डिफरेंट @मीडिया स्क्रीन रिस्पॉन्सिवनेस", जो आपके लिए मददगार है।
इस लेख का लिंक साझा करने के लिए आपका स्वागत है:https://www.chenweiliang.com/cwl-2074.html
नवीनतम अपडेट प्राप्त करने के लिए चेन वेइलियांग के ब्लॉग के टेलीग्राम चैनल में आपका स्वागत है!
📚 इस गाइड में बहुत महत्व है, 🌟यह एक दुर्लभ अवसर है, इसे न चूकें! ⏰⌛💨
अच्छा लगे तो शेयर और लाइक करें!
आपका साझा करना और पसंद करना हमारी निरंतर प्रेरणा है!