בחודשים האחרונים פונים אלינו יותר ויותר לקוחות ומבקשים להתאים את האתר שלהם לסלולרי. אם אתם בוני אתרים (או מקדמי אתרים שמבינים דבר וחצי) אתם בוודאי מודעים לחשיבות העולה שכבר מזמן הפכה להכרחית של אתר מותאם לטלפונים ניידים.
הרשימה הבאה נוצרה לצרכי תיעוד עבור בוני אתרים (וגם בשבילי) ומכילה כללי CSS או כפי שהם נקראים בתחום Media Queries אותם יש לשלב בקובץ CSS או Less שלכם כדי ליצור קוד CSS מותנה עבור מכשירים סלולריים. קיימות המון רשימות ברשת האינטרנט שמאוד דומות ומכילות את אותן הפקודות בדיוק אך נמאס לי לחפש בכל פעם ולכן יצרתי את הרשימה הבאה – פשוט להעתיק ולהדביק.
רשימת Media Queries לסלולרי וטבלטים
פשוט להעתיק ולהדביק
/************************************************
** Smartphones (portrait and landscape)
************************************************/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* סגנונות עיצוב כאן */
}
/************************************************
** Smartphones (landscape)
************************************************/
@media only screen and (min-width : 321px) {
/* Styles */
}
/************************************************
** Smartphones (portrait)
************************************************/
@media only screen and (max-width : 320px) {
/* סגנונות עיצוב כאן */
}
/************************************************
** iPads (portrait and landscape)
************************************************/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* סגנונות עיצוב כאן */
}
/************************************************
** iPads (landscape)
************************************************/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* סגנונות עיצוב כאן */
}
/************************************************
** iPads (landscape)
************************************************/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* סגנונות עיצוב כאן */
}
/************************************************
** iPads (landscape)
************************************************/
@media only screen and (min-width : 1224px) {
/* סגנונות עיצוב כאן */
}
רשימת Media Queries למסכים גדולים
/************************************************
** Desktops and laptops
************************************************/
@media only screen and (min-width : 1224px) {
/* סגנונות עיצוב כאן */
}
/************************************************
** Large screens (common 1920x1280 !)
************************************************/
@media only screen and (min-width : 1824px) {
/* סגנונות עיצוב כאן */
}
זהו, פשוט וקל – תהנו
אין שום מורכבות, אם אתם מבינים עניין הפוסט הנוכחי ישמש כמשאב נוח להעתיק ולהדביק ממנו וזאת הכוונה. כמובן שיש להדביק את קוד הCSS הרצוי בהתאם לרזולוציה של המכשיר אליו אתם מנסים לכוון. מקווה שאהבתם, המון בצלחה. אל תשכחו לפרגן עם לייק או טוויט. נתראה בפוסט הבא.
2 תגובות