חיכינו לזה הרבה זמן. כל מי שבונה אפליקציות או אתרי וורדפרס רספונסיביים יודע שגודל הטקסט יכול להיות בעיה ופתרונות עבר דרשו המון קוד CSS מיותר (כלומר מעכשיו הוא מיותר) או תוספי JS כמו FitText! המון קוד שאנחנו כבר לא צריכים ועוד צעד בדרך לאתר מהיר יותר.
למי מתאים המדריך הזה?
אם אתה בונה אתרים מתחיל או מתקדם, בונה אפליקציות או אפילו מנהל אתר מתקדם המדריך הזה בשבילך הוא קל ליישום ומגיע אלינו עם הגרסה האחרונה של CSS אשר נקראת Css3.
ראשית: קצת תיאוריה
נתחיל עם הסבר קצר לגבי התכונות "החדשות" בCSS שמאפשרות לנו ליצור טקסט רספונסיבי. אל תדאגו אם אתם לא מבינים על מה אני מדבר בטבלה הבאה. דוגמה חיה ממש בהמשך הדף!
| vw | : | שווה ערך ל1% מרוחב הקונטיינר בו הוא נמצא (6vw = 60% מרוחב המסך) |
| vh | : | שווה ערך ל1% מגובה הקונטיינר בו הוא נמצא (6vh = 60% מגובה המסך) |
דוגמה חיה
-
מסך מלא
-
חצי מסך
-
שליש מסך
-
רבע מסך
מה הקטע?
הקטע הוא (כמובן) שהטקסט לא שובר שורה! הוא מתאים את עצמו לגודל של החלון. זאת תכונה מעולה שמאפשרת לנו ליצור טקסט רספונסיבי כמו לדוגמה כותרת גדולה שאנו רוצים שתתאים גם במכשיר סלולרי.
אהבתם? יש שאלות?
טופס התגובות פתוח בשבילכם ואתם מוזמנים להגיש כל שאלה ונשמח לעזור. עצות וטיפים יתקבלו בברכה אז אל תתביישו לתרום. מקווה שאהבתם, נתראה במדריך הבא. שגיב SEO.
