רספונסיביות

[this.pointer]

אני מנסה להפוך אתר לרספונסיבי.
יש כללים ברורים באילו מידות להשתמש לכל סוג של אלמנט?
אם כן אשמח לקישורים.

מה המידה הנכונה לטקסט?
חשבתי em כי הגדלים הדיפולטיבים של large, medium וכו' הם ב-em
אבל יש לי טקסט בגודל 10em לדוג' - במובייל הוא חסר פרופורציה!
לכל דבר צריך לעשות media query?? אני מנסה להימנע מזה כמה שאפשר.

איך עושים margin?
גודל של תמונות?
כל תשובה תעזור! תודה!

 

[Tweenset]

באיזו טכנולוגיה?

 

[java]

לכל דבר צריך לעשות media query?? אני מנסה להימנע מזה כמה שאפשר.

צריך לעשות את זה רק פעם אחת, בapp.css
משהו כמו:

html {
    @media (max-width: 1300px) {
        font-size: 11px !important;
    }
    @media (min-width: 1300px) {
        font-size: 13px !important;
    }
    @media (min-width: 1500px) {
        font-size: 14px !important;
    }
    @media (min-width: 1800px) {
        font-size: 16px;
    }
}

(כמובן לדייק את הערכים לפי הצורך)
ואז להשתמש בrem

 

[this.pointer]

באיזו טכנולוגיה?

MVC, Jquery, CSS.

צריך לעשות את זה רק פעם אחת, בapp.css
משהו כמו:

html {
    @media (max-width: 1300px) {
        font-size: 11px !important;
    }
    @media (min-width: 1300px) {
        font-size: 13px !important;
    }
    @media (min-width: 1500px) {
        font-size: 14px !important;
    }
    @media (min-width: 1800px) {
        font-size: 16px;
    }
}

העניין הוא שצריך לכל טקסט גודל אחר. זה כמויות לא הגיוניות.
לכל טקסט - לכל גודל...

ואז להשתמש בrem

את זה לא הבנתי. ב media query ב-px ובשאר ב-rem?

 

[java]

העניין הוא שצריך לכל טקסט גודל אחר. זה כמויות לא הגיוניות.
לכל טקסט - לכל גודל...

לא הבנתי מה הבעיה.
את הmedia query כותבים פעם אחת,
ואז בטקסטים יש טקסט עם font-size: 1rem וטקסט עם font-size: 0.8rem וכן הלאה.

את זה לא הבנתי. ב media query ב-px ובשאר ב-rem?

כן, זה הרעיון של הmedia query
מגדירים פעם אחת את גודל הrem בפיקסלים עבור כל מסך,
ואז משתמשים בrem הדינמי.

 

[this.pointer]

לא הבנתי מה הבעיה.
את הmedia query כותבים פעם אחת,
ואז בטקסטים יש טקסט עם font-size: 1rem וטקסט עם font-size: 0.8rem וכן הלאה.

כן, זה הרעיון של הmedia query
מגדירים פעם אחת את גודל הrem בפיקסלים עבור כל מסך,
ואז משתמשים בrem הדינמי.

עכשיו הבנתי.
תודה!

 

[this.pointer]

אשמח לתשובות גם לגבי השאלות הנוספות.
תודה.

 

[אלעזר 1]

אני משתמש בספריית בוטסטראפ שנותנת מענה לרוב הבעיות.

 

[this.pointer]

אני משתמש בספריית בוטסטראפ שנותנת מענה לרוב הבעיות.

אני גם עם בוטסטראפ חלקית.
איך עושים שם לדוג' margin רספונסיבי?

 

[אלעזר 1]

אני גם עם בוטסטראפ חלקית.
איך עושים שם לדוג' margin רספונסיבי?

תחביר:

{property}{sides}-{breakpoint}-{size}

דוגמא לשימוש:

mt-lg-2

Spacing

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

getbootstrap.com

לגבי השאלה, צריך פשוט להוסיף 'class' מתאים לכל פריסה, לדוג':

<div class="mt-1 mt-md-2 mt-lg-3">
    <span class="text-center">eaxmple</span>
</div>

 

[this.pointer]

תחביר:

{property}{sides}-{breakpoint}-{size}

דוגמא לשימוש:

mt-lg-2

Spacing

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

getbootstrap.com

לגבי השאלה, צריך פשוט להוסיף 'class' מתאים לכל פריסה, לדוג':

<div class="mt-1 mt-md-2 mt-lg-3">
    <span class="text-center">eaxmple</span>
</div>

תודה רבה!

 

[שירה 123]

רואה שלא כתבו פה.
מה לגבי flex ?
יש המון מדריכים בcss-tricks - שהוא אגב אתר טוב מאד מאד לשימושים מעניינים בcss.
כמו: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

אני באופן אישי כמעט לא משתמשת בmedia query . (וגם לא בgrid.. )

 

[אלעזר 1]

רואה שלא כתבו פה.
מה לגבי flex ?
יש המון מדריכים בcss-tricks - שהוא אגב אתר טוב מאד מאד לשימושים מעניינים בcss.
כמו: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

אני באופן אישי כמעט לא משתמשת בmedia query . (וגם לא בgrid.. )

flex נועד לבניית גריד, אין לו השפעה על גודל פונט.