בקשת מידע | עיצוב דף html בצורה רספונסיבית
-
אני באמצע ללמוד html ו css ואני נתקע בשלב שאני מנסה להגדיר שהאתר יתאים לכל סוגי המסכים, מישהו יכול להסביר בקצרה את הצורה שבה אני אמור לכתוב בצורה רספונסיבית?
אפ' רק קישור לאתר שמסביר, פשוט אני לא מצאתי משהו שאפשר להבין ממנו...
(אני לומד ממדריכים באינטרנט ולכן אין לי מורה לשאול..)
תודה רבה! -
E elazar העביר נושא זה מ-כללי - עזרה הדדית ב-
-
אני באמצע ללמוד html ו css ואני נתקע בשלב שאני מנסה להגדיר שהאתר יתאים לכל סוגי המסכים, מישהו יכול להסביר בקצרה את הצורה שבה אני אמור לכתוב בצורה רספונסיבית?
אפ' רק קישור לאתר שמסביר, פשוט אני לא מצאתי משהו שאפשר להבין ממנו...
(אני לומד ממדריכים באינטרנט ולכן אין לי מורה לשאול..)
תודה רבה!@דוד-5555 אם אתה רוצה להגדיר זאת ב-html אז נראה לי זה הקוד
<meta name="viewport" content="width=device-width,initialcale=1.0">אם אתה רוצה להגדיר רספונסיביות מותאמת אישית לפי גודל מסך (ב-CSS), אז התשובה לזה בקיצור היא
@media only screen
פה יש לך את הגדלים הסטנדרטיים:
https://www.c-sharpcorner.com/UploadFile/44b888/media-queries-for-mobile-laptop-desktop-and-i-pad-for-maki -
א אלישי העביר נושא זה מ-CSS3 ב-
 { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}