मोबाइल उत्तरदायी CSS ले विभिन्न रिजोलुसन अनुसार विभिन्न @media स्क्रिन उत्तरदायी लेआउटहरू कसरी प्रदर्शन गर्छ?
निम्न लेखले विभिन्न रिजोल्युसनहरू निर्धारण गर्न र अनुकूलन चौडाइ प्राप्त गर्न विभिन्न चौडाइ लेआउटहरू प्रदर्शन गर्न कसरी CSS प्रयोग गर्ने भनेर परिचय दिनेछ।
खाँचोमा परेका साथीहरूले यसलाई सन्दर्भ गर्न सक्नुहुन्छ, मलाई आशा छ कि यो सबैलाई उपयोगी हुनेछ।
@media र @media स्क्रिन प्रिन्टिङ वेब पृष्ठहरू बीचको भिन्नता
- यदि css लाई मुद्रण उपकरणमा प्रयोग गर्न आवश्यक छ भने, @media प्रयोग गर्नुहोस्, अन्यथा, @media स्क्रिन प्रयोग गर्नुहोस्।
- यद्यपि, यो आवश्यक छैन कि सत्य हो। वास्तवमा, यदि तपाईंले "स्क्रिन" लाई "प्रिन्ट" ले प्रतिस्थापन गर्नुभयो र यसलाई @media प्रिन्टको रूपमा लेख्नुभयो भने, CSS मुद्रण उपकरणमा प्रयोग गर्न सकिन्छ;
- तर नोट गर्नुहोस् कि @media प्रिन्ट द्वारा घोषित css मुद्रण उपकरणहरूमा मात्र मान्य छ।
1. DIVCSS सानो केस विवरण
हामीले पहिले ".abc" नामको DIV बक्स CSS सेट गर्यौं, यसको उचाइ 300px मा सेट गर्यौं, र CSS बोर्डरलाई कालोमा सेट गर्यौं;
- र सेटिङहरू
margin:0 autoलेआउट केन्द्रित छ, र यी दुई शैलीहरू सजिलो हेर्नको लागि पूर्व-सेट गरिएका छन्।
हामी चौडाइ प्रदर्शन गर्न ब्राउजरलाई म्यानुअल रूपमा तान्दछौं, र त्यसपछि बक्सको चौडाइ कसरी परिवर्तन हुन्छ हेर्नुहोस्:
- जब ब्राउजरको चौडाइ 500px भन्दा बढीको चौडाइमा समायोजन गरिन्छ, 100px बाकसको चौडाइसँग मेल खान्छ;
- जब ब्राउजरको चौडाइ 901px भन्दा कममा समायोजन गरिन्छ, ".abc" बक्सको चौडाइसँग मेल खान्छ, जसले 200px देखाउँछ;
- जब ब्राउजर चौडाइ 1201px भन्दा बढी हुन समायोजित हुन्छ, बक्स वस्तुको चौडाइ 1200px देखाउँछ;
- जब यो 1200px भन्दा कम हुन्छ, प्रदर्शन चौडाई 900px हुन्छ।
2, CSS मोबाइल फोन मोबाइल टर्मिनल अनुकूली कोड
.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宽度 */- यो ध्यान दिनु पर्छ कि CSS कोड अर्डरले CSS लाई ठूला देखि सानो सम्म टाइप गर्दैछ (जति ठूलो ब्राउजर चौडाइ, अगाडि उचो हुन्छ)।
- यो तार्किक सम्बन्धको कारण हो, CSS डिबगिङको @media को निर्णयले निर्णय असफल हुनेछ।
3. HTML कोड
<!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 वाइडस्क्रिनको लागि, अर्को शैली परिभाषित गर्नुहोस्, जस्तै अनुकूली चौडाइ र निश्चित चौडाइ:
- @media मात्र स्क्रिन र (उपकरण-पक्ष-अनुपात: 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>माथिको मोबाइल फोन अनुकूली CSS हो, जसले विभिन्न स्क्रिन अनुसार विभिन्न @media स्क्रिन उत्तरदायी विस्तृत सामग्री प्रदर्शन गर्दछ।
आशा चेन वेइलियाङ ब्लग ( https://www.chenweiliang.com/ ) सेयर गरिएको "मोबाइल एडप्टिभ CSS फरक स्क्रिनले फरक @media स्क्रिन रेस्पोन्सिभनेस डिस्प्ले गर्छ", जुन तपाईलाई उपयोगी छ।
यस लेखको लिङ्क साझा गर्न स्वागत छ:https://www.chenweiliang.com/cwl-2074.html
नवीनतम अपडेटहरू प्राप्त गर्न चेन वेइलियाङको ब्लगको टेलिग्राम च्यानलमा स्वागत छ!
📚 यो गाइडले ठूलो मूल्य समावेश गर्दछ, 🌟यो दुर्लभ अवसर हो, यसलाई नछुटाउनुहोस्! ⏰⌛💨
मन परे लाइक र सेयर गर्नुहोस !
तपाइँको साझा र लाइक हाम्रो निरन्तर प्रेरणा हो!