אַרטיקל וועגווייַזער
ווי קען רירעוודיק אָפּרופיק CSS אַרויסווייַזן פאַרשידענע ריספּאַנסיוו לייאַוץ פון @מעדיאַ פאַרשטעלן לויט פאַרשידענע רעזאַלושאַנז?
די פאלגענדע אַרטיקל וועט באַקענען ווי צו נוצן CSS צו באַשליסן פאַרשידענע רעזאַלושאַנז און אַרויסווייַזן פאַרשידענע ברייט לייאַוץ צו דערגרייכן אַדאַפּטיוו ברייט.
פריינט אין נויט קענען אָפּשיקן צו עס, איך האָפֿן עס וועט זיין נוציק פֿאַר אַלעמען.
דער חילוק צווישן @media און @media פאַרשטעלן דרוקן וועב זייַטלעך
- אויב די css דאַרף זיין געוויינט אין אַ דרוק מיטל, נוצן @media, אַנדערש נוצן @media פאַרשטעלן.
- אָבער, דאָס איז ניט דאַווקע אמת, אין פאַקט, אויב איר פאַרבייַטן "סקרין" מיט "פּרינט" און שרייַבן עס ווי @מעדיע דרוק, דעמאָלט די CSS קענען זיין געוויינט אויף די דרוק מיטל;
- אָבער טאָן אַז די CSS דערקלערט דורך @media דרוק איז גילטיק בלויז אויף דרוקן דעוויסעס.
1. DIVCSS קליין פאַל באַשרייַבונג
מיר ערשטער שטעלן אַ דיוו קעסטל קסס געהייסן ".אַבק", שטעלן זייַן הייך צו 300פּקס, און שטעלן די קסס גרענעץ צו שוואַרץ;
- און סעטטינגס
margin:0 autoדער אויסלייג איז סענטערד, און די צוויי סטיילז זענען פאַר-שטעלן פֿאַר גרינג וויוינג.
מיר מאַניואַלי שלעפּן דעם בלעטערער צו אַרויסווייַזן די ברייט, און דעמאָלט אָבסערווירן ווי די ברייט פון די קעסטל ענדערונגען:
- ווען די ברייט פון דעם בלעטערער איז אַדזשאַסטיד צו אַ ברייט פון נישט מער ווי 500 פּקס, 100 פּקס איז געוויזן קאָראַספּאַנדינג צו די ברייט פון די קעסטל;
- ווען די ברייט פון דעם בלעטערער איז אַדזשאַסטיד צו זיין ווייניקער ווי 901פּקס, ".אַבק" איז געוויזן קאָראַספּאַנדינג צו די ברייט פון די קעסטל, וואָס דיספּלייז 200פּקס;
- ווען דער בלעטערער ברייט איז אַדזשאַסטיד צו זיין גרעסער ווי 1201 פּקס, די ברייט פון די קעסטל כייפעץ דיספּלייז 1200 פּקס;
- ווען עס איז ווייניקער ווי 1200 פּקס, די אַרויסווייַזן ברייט איז 900 פּקס.
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宽度 */- עס זאָל זיין אנגעוויזן אַז די סדר פון די CSS קאָד איז טיפּ-סעטטינג CSS פון גרויס צו קליין (צו משפטן אַז די גרעסערע די בלעטערער ברייט, די העכער די פראָנט).
- דאָס איז ווייַל פון די לאַדזשיקאַל שייכות, @media ס משפט פון 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 ווידעסקרעען, דעפינירן אן אנדער נוסח, אַזאַ ווי אַדאַפּטיוו ברייט און פאַרפעסטיקט ברייט:
- @media בלויז פאַרשטעלן און (מיטל-אַספּעקט-פאַרהעלטעניש:4/3)
4. קאַמפּאַטאַבאַל מיט הויפּט בראַוזערז 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}
}
@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>די אויבן איז די רירעוודיק טעלעפאָן אַדאַפּטיוו קסס, וואָס דיספּלייז פאַרשידענע @ מעדיע פאַרשטעלן ריספּאַנסיוו דיטיילד אינהאַלט לויט צו פאַרשידענע סקרינז.
Hope Chen Weiliang בלאָג ( https://www.chenweiliang.com/ ) שערד "מאָביל אַדאַפּטיוו קסס פאַרשידענע סקרינז ווייַז פאַרשידענע @ מעדיע סקרין ריספּאַנסיוונאַס", וואָס איז נוציק פֿאַר איר.
ברוכים הבאים צו טיילן דעם לינק פון דעם אַרטיקל:https://www.chenweiliang.com/cwl-2074.html
ברוכים הבאים צו די טעלעגראַם קאַנאַל פון Chen Weiliang ס בלאָג צו באַקומען די לעצטע דערהייַנטיקונגען!
📚 דער פירער כּולל ריזיק ווערט, 🌟 דאָס איז אַ זעלטן געלעגנהייט, טאָן ניט פעלן עס! ⏰⌛💨
ייַנטיילן און ווי אויב איר ווילט!
דיין ייַנטיילונג און לייקס זענען אונדזער קעסיידערדיק מאָוטאַוויישאַן!