כיצד CSS רספונסיבי לנייד מציג פריסות ריספונסיביות שונות של מסך @מדיה בהתאם לרזולוציות שונות?
המאמר הבא יציג כיצד להשתמש ב-CSS כדי לקבוע רזולוציות שונות ולהציג פריסות רוחב שונות כדי להשיג רוחב אדפטיבי.
חברים במצוקה יכולים להתייחס אליו, אני מקווה שזה יעזור לכולם.
ההבדל בין דפי אינטרנט להדפסת מסך @media ו-@media
- אם צריך להשתמש ב-CSS בהתקן הדפסה, השתמש ב-@media, אחרת, השתמש במסך @media.
- עם זאת, זה לא בהכרח נכון. למעשה, אם אתה מחליף "מסך" ב"הדפס" ותכתוב אותו כ-@media print, אז ניתן להשתמש ב-CSS במכשיר ההדפסה;
- אבל שימו לב שה-CSS שהוכרז על ידי @media print תקף רק במכשירי הדפסה.
1. תיאור מקרה קטן של DIVCSS
תחילה הגדרנו תיבת DIV CSS בשם ".abc", הגדרנו את גובהה ל-300px, והגדרנו את גבול ה-CSS לשחור;
- והגדרות
margin:0 autoהפריסה ממורכזת, ושני הסגנונות הללו מוגדרים מראש לצפייה קלה.
אנו גוררים את הדפדפן באופן ידני כדי להציג את הרוחב, ולאחר מכן צופים כיצד רוחב התיבה משתנה:
- כאשר רוחב הדפדפן מותאם לרוחב של לא יותר מ-500 פיקסלים, 100 פיקסלים מוצגים בהתאם לרוחב התיבה;
- כאשר רוחב הדפדפן מותאם להיות פחות מ-901 פיקסלים, ".abc" מוצג בהתאם לרוחב התיבה, המציגה 200 פיקסלים;
- כאשר רוחב הדפדפן מותאם להיות גדול מ-1201px, רוחב אובייקט התיבה מציג 1200px;
- כאשר הוא קטן מ-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 מגדול לקטן (אם לשפוט שככל שרוחב הדפדפן גדול יותר, כך החזית גבוהה יותר).
- זה בגלל הקשר ההגיוני, שיקול הדעת של @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>הערה: יחס גובה-רוחב התקן
- ניתן להשתמש ב- device-aspect-ratio כדי להתאים למכשירים עם יחסי גובה-רוחב ספציפיים למסך, שהוא גם מאפיין שימושי.
- לדוגמה, העמוד שלנו רוצה להגדיר סגנון למסכים רגילים עם יחס רוחב-גובה של 4:3.
- לאחר מכן עבור מסך רחב של 16:9 ו-16:10, הגדר סגנון אחר, כגון רוחב אדפטיבי ורוחב קבוע:
- מסך @מדיה בלבד ו-(device-aspect-ratio: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 רספונסיבי לפי מסכים שונים.
Hope Chen Weiliang בלוג ( https://www.chenweiliang.com/ ) משותף "מסכים שונים ב-CSS מסתגלים לנייד מציגים תגובתיות מסך @מדיה שונה", וזה מועיל לך.
מוזמנים לשתף את הקישור של מאמר זה:https://www.chenweiliang.com/cwl-2074.html
ברוכים הבאים לערוץ הטלגרם של הבלוג של Chen Weiliang כדי לקבל את העדכונים האחרונים!
📚 המדריך הזה מכיל ערך עצום, 🌟זו הזדמנות נדירה, אל תפספסו אותה! ⏰⌛💨
שתפו ותעשו לייק אם בא לכם!
השיתוף והלייקים שלך הם המוטיבציה המתמשכת שלנו!