صفحه ی پاسخگو
سلام دوستان
من میخوام یک صفحه‌ی پاسخگو طراحی کنم که با تغییر اندازه‌ی عرض این صفحه، رنگ پس زمینش تغییر پیدا کنه.
ویژگی هاش:
در صورتی که عرض صفحه کمتر از ۶۰۰ پیکسل است، باید #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>گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام
من این کد رو تست کردم، اوکیه.
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>`
به سادگی و به کمک دستورات css پیاده سازی کنید:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp