CSS Media Query দিয়ে কমন ডিভাইস ব্রেকপয়েন্ট ব্যবহার করার কোড নিচে দেওয়া হলো:
উদাহরণ
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color: white; } @media only screen and (max-width: 600px) { body { background: rgb(207, 60, 151); } } @media only screen and (min-width: 600px) { body { background: rgb(0, 128, 107); } } @media only screen and (min-width: 768px) { body { background: rgb(226, 136, 18); } } @media only screen and (min-width: 992px) { body { background: rgb(108, 25, 185); } } @media only screen and (min-width: 1200px) { body { background: rgb(13, 124, 63); } } </style> </head> <body> <h1>Typical Breakpoints Example</h1> <h2> Resize the screen to see background color change on different breakpoints </h2> </body> </html>
আউটপুট
১২০০px-এর বেশি স্ক্রিনে নিচের আউটপুট:
০ থেকে ৬০০px স্ক্রিনে নিচের আউটপুট:
