איך הכי מומלץ לעצב דף רספונסיבי

cd123

משתמש פעיל
D I G I T A L
שלום :)

אני צריכה דחוף את עזרתכם,
בעבר כתבתי web אבל לא עבדתי על הקטע של הרספונסיביות.
עכשו אני נדרשת לכתוב לאתר דף שיהיה רספונסיבי,
האם עדיף לעשות את זה בטבלה עם אחוזים ואז הדף קטן עם התוכן, או האם עדיף ב bootstrap,
שאז יש פחות גמישות, אבל זה יותר מתאים לרזולוציות קטנות?

אודה לתגובתכם בדחיפות,
תודה מראש
 

Aharono

משתמש פעיל
D I G I T A L
bootstrap זו לא מילת קסם.... זה אוסף (מכובד מאוד, יש לציין) של הגדרות מוכנות מראש של css (יש גם js, נכון... אבל זה לא רלוונטי אלינו) שעוזרות לבנות ממשק מהיר גם למובייל.

אף אחד לא עובד עם טבלה יותר כבסיס ל layout לעמוד, שכחו מזה.

יש שני דברים חדשים (יחסית... :p) שכדאי לכם ללמוד:
א. Flexbox (מה ש@עילום אמר באריכות), הרעיון ב flexbox במשפט היא סידור של אלמנטים שמוכלים בתוך אלמנט אב (פעםםםםםם היו עושים את זה עם טבלה, אח"כ היו עושים את זה עם float ושאר הגדרות, היום עושים flex, פשוט ונח). לינק חובה (אל תקראו את כל העמוד בפעם אחת, כדאי ללמוד תוך כדיי מעשה): https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ב. media queries, הרעיון בזה שהרבה פעמים ה layout משתנה ביחס לגודל המסך (בעיקר, אמנם יש אפשרות גם לשנות את ה layout בהתאם לסוג התצוגה: מסך או הדפסה לדוגמה, אבל, זה לא לרגע זה), לדוגמה: יש צורך להציג את הלוגו של האתר בגרסה של המובייל לכל רוחב העמוד אבל בעמוד למחשב, להציג אותו רק בתחילת העמוד.

אז למעשה מגדירים ב css את ההגדרה של המובייל (כלומר, שלתמונה יהיה width: 100%) קודם לכן (זה בגלל גוגל, שמקדמים אתרים עם עדיפות למובייל - מה שנקרא mobile first) ואם\כאשר יהיה רוחב העמוד לדוגמה 1024 (כלומר, גודל מסך של מחשב) אז תוצג התמונה בתחילת העמוד (נניח, float: right ו width: 200px), אז ה css ייראה כך:

This user does not have permission to use the HTML BB code.
יוצאים שני כללים מכל הבלאגן:
א. קובעים את הlayout קודם כל למובייל
ב. מוסיפים שאילתא (זו מילה שלא השתמשתי בה ב15 שנים האחרונות, לכל הפחות) להתאים את ה layout לשינויים של ה desktop.


* הערה אחרונה: אחרי שסיימתם לריב עם ה css ואתם מרגישים בנח, תסתכלו על sass, ממליץ בחום (יש לי פה איפשהו הודעה על זה, צריך לחפש בהזדמנות), מאוד נח
 

אולי מעניין אותך גם...

הפרק היומי

הפרק היומי! כל ערב פרק תהילים חדש. הצטרפו אלינו לקריאת תהילים משותפת!


תהילים פרק קיט ק'

קמה קָרָאתִי בְכָל לֵב עֲנֵנִי יי חֻקֶּיךָ אֶצֹּרָה:קמו קְרָאתִיךָ הוֹשִׁיעֵנִי וְאֶשְׁמְרָה עֵדֹתֶיךָ:קמז קִדַּמְתִּי בַנֶּשֶׁף וָאֲשַׁוֵּעָה (לדבריך) לִדְבָרְךָ יִחָלְתִּי:קמח קִדְּמוּ עֵינַי אַשְׁמֻרוֹת לָשִׂיחַ בְּאִמְרָתֶךָ:קמט קוֹלִי שִׁמְעָה כְחַסְדֶּךָ יי כְּמִשְׁפָּטֶךָ חַיֵּנִי:קנ קָרְבוּ רֹדְפֵי זִמָּה מִתּוֹרָתְךָ רָחָקוּ:קנא קָרוֹב אַתָּה יי וְכָל מִצְוֹתֶיךָ אֱמֶת:קנב קֶדֶם יָדַעְתִּי מֵעֵדֹתֶיךָ כִּי לְעוֹלָם יְסַדְתָּם:
נקרא  9  פעמים

אתגר AI

הסוואה • אתגר 21 • אתגר נושא פרסים 🎁

לוח מודעות

למעלה