የሞባይል ምላሽ CSS እንዴት በተለያዩ ጥራቶች መሰረት የተለያዩ @ሚዲያ ስክሪን ምላሽ ሰጪ አቀማመጦችን ያሳያል?
የሚለምደዉ ስፋትን ለማግኘት የተለያዩ ጥራቶችን ለመወሰን እና የተለያዩ ስፋት አቀማመጦችን ለማሳየት CSSን እንዴት መጠቀም እንደሚቻል የሚቀጥለው መጣጥፍ ያስተዋውቃል።
የተቸገሩ ጓደኞች ሊያመለክቱት ይችላሉ, ለሁሉም ሰው ጠቃሚ እንደሚሆን ተስፋ አደርጋለሁ.
በ @ ሚዲያ እና @ሚዲያ ስክሪን ማተሚያ ድረ-ገጾች መካከል ያለው ልዩነት
- css በማተሚያ መሳሪያ ውስጥ ጥቅም ላይ መዋል ካስፈለገ @ሚዲያን ይጠቀሙ፣ አለበለዚያ @ሚዲያ ስክሪን ይጠቀሙ።
- ነገር ግን ይህ የግድ እውነት አይደለም፡ እንደውም “ስክሪን”ን በ"ህትመት" ብትተኩ እና እንደ @ሚዲያ ህትመት ከፃፉት CSS በማተሚያ መሳሪያው ላይ መጠቀም ይቻላል፤
- ነገር ግን በ@media print የተገለጸው css በህትመት መሳሪያዎች ላይ ብቻ የሚሰራ መሆኑን ልብ ይበሉ።
1. DIVCSS ትንሽ ጉዳይ መግለጫ
በመጀመሪያ ".abc" የሚል ስም ያለው DIV ሳጥን CSS አዘጋጅተናል, ቁመቱን ወደ 300 ፒክስል እና የሲኤስኤስ ወሰን ጥቁር አድርገናል;
- እና ቅንብሮች
margin:0 autoአቀማመጡ መሃል ላይ ያተኮረ ነው, እና እነዚህ ሁለት ቅጦች ለቀላል እይታ አስቀድመው ተዘጋጅተዋል.
ስፋቱን ለማሳየት አሳሹን በእጃችን እንጎትተዋለን፣ እና በመቀጠል የሳጥኑ ስፋት እንዴት እንደሚቀየር እንመለከታለን፡-
- የአሳሹ ስፋት ከ 500 ፒክስል ያልበለጠ ስፋት ሲስተካከል, 100 ፒክስል ከሳጥኑ ስፋት ጋር ይዛመዳል;
- የአሳሹ ስፋት ከ 901 ፒክስል ያነሰ ሆኖ ሲስተካከል ".abc" ከሳጥኑ ስፋት ጋር የሚዛመድ ሲሆን ይህም 200 ፒክስል ያሳያል;
- የአሳሹ ስፋት ከ 1201 ፒክስል በላይ እንዲሆን ሲስተካከል, የሳጥኑ ነገር ስፋት 1200 ፒክስል ያሳያል;
- ከ 1200 ፒክስል ያነሰ ሲሆን, የማሳያው ስፋት 900 ፒክስል ነው.
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 ማረም ፍርድ ፍርዱ እንዲወድቅ ያደርገዋል።
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 ሰፊ ስክሪን፣ ሌላ ዘይቤን ይግለጹ፣ እንደ አስማሚ ስፋት እና ቋሚ ስፋት፡
- @ሚዲያ ብቻ ስክሪን እና (የመሣሪያ-አስተሳሰብ-ሬሾ፡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 ነው፣ እሱም የተለያዩ @ሚዲያ ስክሪን ምላሽ ሰጪ ዝርዝር ይዘቶችን በተለያዩ ስክሪኖች ያሳያል።
ተስፋ Chen Weiliang ብሎግ ( https://www.chenweiliang.com/ ) የተጋራ "ሞባይል አስማሚ CSS የተለያዩ ስክሪኖች የሚያሳዩት የተለያዩ @ሚዲያ ስክሪን ምላሽ"፣ ይህም ለእርስዎ ጠቃሚ ነው።
እንኳን በደህና መጡ የዚህን ጽሁፍ ማገናኛ ለማጋራት፡-https://www.chenweiliang.com/cwl-2074.html