ලිපි නාමාවලිය
ජංගම ප්‍රතිචාරාත්මක CSS විවිධ විභේදනවලට අනුව විවිධ @media තිර ප්‍රතිචාරාත්මක පිරිසැලසුම් සංදර්ශන කරන්නේ කෙසේද?
විවිධ විභේදන නිර්ණය කිරීමට සහ අනුවර්තන පළල ලබා ගැනීම සඳහා විවිධ පළල පිරිසැලසුම් පෙන්වීමට CSS භාවිතා කරන ආකාරය පහත ලිපියෙන් හඳුන්වා දෙනු ඇත.
අවශ්‍යතා ඇති මිතුරන්ට එය යොමු කළ හැකිය, එය සෑම කෙනෙකුටම ප්‍රයෝජනවත් වනු ඇතැයි මම බලාපොරොත්තු වෙමි.
@media සහ @media තිර මුද්‍රණ වෙබ් පිටු අතර වෙනස
- මුද්‍රණ උපාංගයක css භාවිතා කිරීමට අවශ්‍ය නම්, @media භාවිතා කරන්න, එසේ නොමැති නම්, @media තිරය භාවිතා කරන්න.
- කෙසේ වෙතත්, මෙය අනිවාර්යයෙන්ම සත්‍ය නොවේ, ඇත්ත වශයෙන්ම, ඔබ "තිරය" "මුද්‍රණය" වෙනුවට එය @ මාධ්‍ය මුද්‍රණය ලෙස ලියන්නේ නම්, එවිට CSS මුද්‍රණ උපාංගයේ භාවිතා කළ හැක;
- නමුත් @media print මගින් ප්‍රකාශිත 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 පුළුල් තිරය සඳහා, අනුවර්තන පළල සහ ස්ථාවර පළල වැනි වෙනත් මෝස්තරයක් නිර්වචනය කරන්න:
- @මාධ්‍ය පමණක් තිරය සහ (උපාංග-දර්ශන අනුපාතය: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 වන අතර එය විවිධ තිරවලට අනුව විවිධ @ මාධ්‍ය තිරයට ප්‍රතිචාර දක්වන සවිස්තරාත්මක අන්තර්ගතයන් පෙන්වයි.
Hope Chen Weiliang බ්ලොග් ( https://www.chenweiliang.com/ ) බෙදාගත් "ජංගම අනුවර්තන CSS විවිධ තිර සංදර්ශකය වෙනස් @ මාධ්‍ය තිර ප්‍රතිචාරාත්මක", එය ඔබට ප්‍රයෝජනවත් වේ.
මෙම ලිපියේ සබැඳිය බෙදා ගැනීමට සාදරයෙන් පිළිගනිමු:https://www.chenweiliang.com/cwl-2074.html
නවතම යාවත්කාලීන ලබා ගැනීමට Chen Weiliang ගේ බ්ලොගයේ Telegram නාලිකාව වෙත සාදරයෙන් පිළිගනිමු!
📚 මෙම මාර්ගෝපදේශයෙහි විශාල වටිනාකමක් ඇත, 🌟මෙය දුර්ලභ අවස්ථාවක්, එය අතපසු නොකරන්න! ⏰⌛💨
ඔබ කැමති නම් Share කර Like කරන්න!
ඔබගේ බෙදාගැනීම් සහ කැමැත්ත අපගේ අඛණ්ඩ අභිප්‍රේරණයයි!