יחידות Viewport

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 64 מתוך 76.

ב-CSS, יחידות אזור התצוגה הן יחידות מידה יחסיות המבוססות על גודל אזור התצוגה של הדפדפן (השטח הגלוי של דף האינטרנט). הן מאפשרות ליצור עיצובים רספונסיביים באמצעות התאמת הגודל של רכיבים ושל טקסט באופן יחסי לרוחב או לגובה של אזור התצוגה. יחידות אזור התצוגה שימושיות במיוחד ליצירת פריסות גמישות, לשינוי קנה המידה של טקסט ולמיקום רכיבים באופן שמתאים את עצמו לגדלים שונים של מסכים.

יש ארבע יחידות אזור תצוגה:

vw (רוחב אזור התצוגה): מייצג 1% מרוחב אזור התצוגה. לדוגמה, 10vw שווה ל־10% מרוחב אזור התצוגה.

vh (גובה אזור התצוגה): מייצג 1% מגובה אזור התצוגה. לדוגמה, 25vh שווה ל־25% מגובה אזור התצוגה.

vmin (הממד הקטן ביותר של אזור התצוגה): מייצג 1% מהממד הקטן יותר של אזור התצוגה (רוחב או גובה). לדוגמה, אם אזור התצוגה רחב יותר מאשר הוא גבוה, 5vmin שווה ל־5% מגובה אזור התצוגה.

vmax (הממד המרבי של אזור התצוגה): מייצג 1% מהממד הגדול יותר של אזור התצוגה (רוחב או גובה). לדוגמה, אם אזור התצוגה רחב יותר משהוא גבוה, 8vmax שווה ל־8% מרוחב אזור התצוגה.

הנה התחביר הבסיסי לשימוש ביחידות אזור התצוגה:

selector {
    property: value;
}

selector: בורר CSS שמכוון לרכיבי HTML שברצונך לעצב.

property: מאפיין ה-CSS שברצונך להגדיר (למשל, width, height, font-size, margin, padding).

value: ערך שכולל יחידות של אזור התצוגה (למשל, 50vw, 75vh, 10vmin, 5vmax).

לדוגמה:

.box {
    width: 50vw; /* רוחב התיבה יהיה 50% מרוחב אזור התצוגה */
    height: 30vh; /* גובה התיבה יהיה 30% מגובה אזור התצוגה */
}

בדוגמה הזו, לרכיב .box יש רוחב של 50vw וגובה של 30vh, כך שהוא מותאם גם לרוחב וגם לגובה של אזור התצוגה.

אתגר

קל

ניתן לך מסמך HTML עם כותרת (<h1>), פסקה (<p>) וחלוקה (<div>). המשימה שלך היא להשתמש ביחידות תצוגה כדי להפוך את הרכיבים האלה למותאמים. בצע את השלבים הבאים:

כתוב כלל CSS שחל על הרכיב <h1>. הגדר את font-size שלו ל־6vw.
כתוב כלל CSS שחל על הרכיב <p>. הגדר את font-size שלו ל־4vmin.
כתוב כלל CSS שחל על הרכיב <div>. הגדר את width שלו ל־80vw ואת height שלו ל־50vh.

נסו בעצמכם

<html>
<head>
    <title>Viewport Units</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
    <h1>Antarctica</h1>  
    <p>The coldest continent, covered in ice and home to penguins and seals.</p>  
    <div>It has no permanent residents, only research stations.</div> 
</body>
</html>