كاتب الموضوع: BENACEUR
التصنيف: دروس - css

في الحقيقة هي خاصية جميلة ومفيدة جدا حيث يمكننا إخفاء أو إظهار كلاسات وعناصر معينة كالصور مثلا عند تغيير عرض الشاشة فمثلا لدينا :

#menu18 {
background : url(img/linkarrow.gif) no-repeat;
}

إذا أردنا مثلا إخفاء الصورة عند رؤية الموقع في شاشة عرضها أقل من 1020 بيكسل نضع الصورة أو رابط الصورة في ملف السي أس أس css كالتالي :

@media screen and (min-width: 1020px) {
#menu18 {
background : url(img/linkarrow.gif) no-repeat;
}
}

الآن نريد إظهار المحتوى في شاشة عرضها أكبر من 640 بيكسل وأقل من 1020 بيكسل :

@media screen  and (min-width: 640px) and (max-width: 1020px) {
#menu18 {
background : url(img/linkarrow.gif) no-repeat;
}
}

كما يمكننا إخفاء جميع ملف الستايل بطرق ثلاث وهي كالتالي :

الطريقة الأولى :

<link rel="stylesheet" media="screen and (min-width: 1024px)"  href="benaceur.css" type="text/css" />

الطريقة الثانية :

@import "smallscreen.css" only screen and (min-width: 1024px);

الطريقة الثالثة :

<style type="text/css">
  @media only screen and (min-width: 1024px){
    /* هنا نضع جميع الكلاسات حيث لن تظهر ولن تطبق في شاشة عرضها أقل من 1024 بيكسل */
  }
</style>

بيئة التشغيل :

Chrome, Safari
Firefox, SeaMonkey
IE 9
Opéra