• 0
mehdy

التحكم في عرض الشاشة بواسطة 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>

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

4 إجابة على هذا السؤال .

  • 0

شكرا جزيلا على المعلومات الرائعة ولكن سؤال هل بالنسبة لـ Mobile كيف ستكون وخصوصا ان الهواتف الذكية كثرت مثل iphone وغيرها فهل الافضل ان يصممم تصميم خاص لذلك أم ؟

تم تعديل بواسطه عرب ويب ديزاينر
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

بالنسبة ل mobile يمكن كتابة stylesheet خاص بكل واحد , مثال :



@media screen and (device-width: 320px) {

}

@media screen and (device-width: 360px) {

}

@media screen and (device-width: 480px) {

}


أو كتابة بهذا الشكل مع استدعاء stylesheet بواسطة href


<link rel="stylesheet" media="screen and (device-width:320px)" href="phone_320.css" />

بالنسبة ل device-width : فهي تقوم بتحديد عرض الشاشة على خلاف width التي تقوم بتحديد عرض الصفحة

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

هناك تقنية تسمى : Responsive web design و هدفها جعل الموقع يتلائم مع جميع الشاشات , مثال

http://kulturbanause.de/

kulturbanause2.jpg

أو

http://mediaqueri.es/

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

قم بتحديد margin 0px; وستلاحظ أنا الصفحة أصبحات في الوسط


تم تعديل بواسطه laassiba
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .