מדריך מאמרים
בגלל האינטרנט הנייד המשגשג,שיווק Wechatהפופולריות של טלפונים ניידים הפכההחייםכלי חובה.
בנה תחנהתבנית, מומלץ להשתמשוורדפרסנושא מותאם עבור:
- אם מפתח ערכת הנושא של וורדפרס לא עשה את המסך מותאם לתמונה ב-HTML 5 היטב בעת עיצוב דף הנושא של וורדפרס...
- גלישה באתר במכשיר סלולרי, תהיה נקע מאוד מכוער בתמונה, וחווית המשתמש גרועה ביותר!
מה המשמעות של התאמה לתמונה CSS?
התאמה עצמית של תמונת CSS מתייחסת ליצירת התמונות בדף האינטרנט של HTML, באמצעות קוד CSS:
- התאמה אוטומטית לרוחב ולגובה של מכשירים שונים.
- תג ה-img משתנה באופן אוטומטי באופן פרופורציונלי.
הַבָּא,צ'ן וייליאנגאני אחלוק איתך את קוד הקנה מידה פרופורציונלי CSS img ^_^
קוד התאמה לגובה ורוחב של תמונת CSS
הוסף תמונה ב-html:
אם אתה רוצה שהתמונה תתאים לגודל הקטן של המסך במקום להישאר קבוע ברוחב ובגובה.
אתה יכול להוסיף את הקוד הבא לקובץ style.css של ערכת הנושא של וורדפרס שלך ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }הצהרה כאןmax-widthכלל רוחב מרבי
- כדי להבטיח שכל התמונות יוצגו ב-100% לכל היותר (כלומר, ניתן להציג אותן רק בגודלן כמו התמונות שלהן).
- בשלב זה, אם האלמנט המכיל את התמונה (לדוגמה, הגוף או ה-div שמכילים את התמונה) קטן מהרוחב המובנה של התמונה, התמונה תותאם כך שתמלא את השטח הפנוי המקסימלי.
width:auto;פירושו רוחב אוטומטי
\9 זו דרך לכתוב hack css.
- בדרך זו, "\9" מתווסף לקוד css הרגיל, רק דפדפן IE יכול לזהות אותו, דפדפנים אחרים יתעלמו מהמשפט הזה.
- זה ישיג בידול של דפדפן, מה שיאפשר את המטרה של דפדפנים תואמים.
למה לא להשתמש ברוחב: 100%?
כדי להשיג קנה מידה אוטומטי של תמונות, אתה יכול גם להשתמש במאפייני הרוחב הנפוצים יותר, למשל.width：100％.
עם זאת, כלל זה אינו חל כאן.
- כי הכלל הזה יגרום לו להיראות רחב כמו המיכל שלו.
- במקרים בהם המיכל רחב בהרבה מהתמונה, התמונה תימתח ללא צורך.
注意 事项
מהם בוררי CSS? מה ההבדל בין מחלקה לזיהוי?ההדרכות הבאות מדברות על ▼
איך האתר לנייד מנגן וידאו MP4 מותאם לדף?אנא לחץ על הקישור למטה ▼
Hope Chen Weiliang בלוג ( https://www.chenweiliang.com/ ) שיתף "קוד קנה מידה פרופורציונלי של דף אינטרנט HTML 5 תמונה אדפטיבית מסך", שעוזר לך.
מוזמנים לשתף את הקישור של מאמר זה:https://www.chenweiliang.com/cwl-964.html
ברוכים הבאים לערוץ הטלגרם של הבלוג של Chen Weiliang כדי לקבל את העדכונים האחרונים!
📚 המדריך הזה מכיל ערך עצום, 🌟זו הזדמנות נדירה, אל תפספסו אותה! ⏰⌛💨
שתפו ותעשו לייק אם בא לכם!
השיתוף והלייקים שלך הם המוטיבציה המתמשכת שלנו!