التحكم في عرض الشاشة بواسطة Media Queries CSS3

السلام عليكم

--------------------------------

يمكن استعمال تقنية Media Queries لتحكم في طريقة عرض style هل هو من أجل الطباعة , mobile أو screen .....

مثال بسيط , التحكم في عرض الشاشة ب : Media screen

1 |@media screen and (min-width:1000px) { 
2 |		body {
3 |			background: orange;
4 |		}
5 |		}

السطر 1 :

- تعريف خاصية @media

- نوع media هنا screen

- تحديد حجم معين للصفحة بواسطة condition :

and (min-width:1000px)

السطر 2 , 4 :

- في حالة تحقق condition , تلوين الخلفية باللون البرتقالي

==================

تلوين الخلفية بألوان مختلفة بحسب تغير حجم الشاشة :

<!DOCTYPE html>
<html>
<head>
<style>
	@media screen and (max-width:767px) {
			body {
				background: red;
			}
			}
	@media screen and (min-width:768px) {
			body {
				background: blue;
			}
			}
	@media screen and (min-width:1000px) {
			body {
				background: orange;
			}
			}
	@media screen and (min-width:1260px) {
			body {
				background: green;
			}
			}
	@media screen and (min-width:1582px) {
			body {
				background: yellow;
			}
			}
</style>
</head>
<body>
</body>
</html>