بزرگترین جشنواره سال راکت! ۵۰ درصد تخفیف شگفت انگیز نوروزی!
از دستش نده!سلام دوستان
من میخوام یک صفحهی پاسخگو طراحی کنم که با تغییر اندازهی عرض این صفحه، رنگ پس زمینش تغییر پیدا کنه.
ویژگی هاش:
در صورتی که عرض صفحه کمتر از ۶۰۰ پیکسل است، باید #F00 باشد.
در صورتی که عرض صفحه بین ۶۰۰ تا ۹۰۰ پیکسل (شامل خود ۶۰۰ و ۹۰۰) است، باید #FF0باشد.
در صورتی که عرض صفحه بیشتر از ۹۰۰ پیکسل است، باید #0F0 باشد.
نکات:
<!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
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟