صفحه ی پاسخگو
سلام دوستان
من میخوام یک صفحهی پاسخگو طراحی کنم که با تغییر اندازهی عرض این صفحه، رنگ پس زمینش تغییر پیدا کنه.
ویژگی هاش:
در صورتی که عرض صفحه کمتر از ۶۰۰ پیکسل است، باید #F00 باشد.
در صورتی که عرض صفحه بین ۶۰۰ تا ۹۰۰ پیکسل (شامل خود ۶۰۰ و ۹۰۰) است، باید #FF0باشد.
در صورتی که عرض صفحه بیشتر از ۹۰۰ پیکسل است، باید #0F0 باشد.
نکات:
- از ارجاع به فایلهای موجود در وب (CDN ها) خودداری کنید*
حالا من کدش رو نوشتم ولی خطا میده
میشه راهنمایی کنید و بگید کجای کد مشکل داره؟
سوال صفحه ی پاسخگو: https://quera.org/problemset/33043/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
<script>
const body = document.querySelector('body')
let width;
window.addEventListener('resize', () => {
console.log('ss')
width = innerWidth;
// switch(width){
// case :
// }
if (width < 600) {
body.style.backgroundColor = '#f00'
} else if (width < 900) {
body.style.backgroundColor = '#ff0'
} else if (width > 900) {
body.style.backgroundColor = '#0f0'
}
})
</script>
</html>
پاسخها
10
سلام
من این کد رو تست کردم، اوکیه.
let body = document.querySelector('body');
window.addEventListener("resize", () => {
if (body.offsetWidth < 600) {
body.style.backgroundColor = "#f00";
} else if (body.offsetWidth < 900) {
body.style.backgroundColor = "#ff0";
} else if (body.offsetWidth > 900) {
body.style.backgroundColor = "#0f0";
}
})
چرا از مدیاکوئری استفاده نکردین؟
هنوز برای من خطا میده
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
از کدی که براتون فرستادم؟
چه خطایی میده؟
اره متاسفانه وقتی داخل آنلاین کامپایلر کد رو وارد میکنم موقع دانلود خطا میده
با 2 تا کامپایلر انجام دادم ولی بی نتیجه بود
دانلود نمیشه
فکر نکنم کد ها مشکلی داشته باشن.
شما توی سیستم خودتون تست کنید، ببینید به اررو می خورید؟
این کدیه که خطا میده
کد شمارو واردش کردم ولی نمیدونم چرا کامپیالرم دانلودش نمیتونه بکنه`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
<script>
const body = document.querySelector('body')
let width;
let body = document.querySelector('body');
window.addEventListener("resize", () => {
if (body.offsetWidth < 600) {
body.style.backgroundColor = "#f00";
} else if (body.offsetWidth < 900) {
body.style.backgroundColor = "#ff0";
} else if (body.offsetWidth > 900) {
body.style.backgroundColor = "#0f0";
}
})
})
</script>
</html>`
خب شاید ایراد از کد های جاوااسکریپت میگیره که داخل کد های html هست.
ممنون از راهنماییتون درست شد
به سادگی و به کمک دستورات css پیاده سازی کنید:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp