التصنيف: دعم عام
التصنيف: دعم عام
  • إضافة schema سكيما للصورة البارزة itemprop
  • الالوان في ستايل اضافة News-Ticker-Benaceur لا تعمل
  • اريد كود جعل الصور متساوية في الرئيسية

إضافة schema سكيما للصورة البارزة itemprop

مرحبا أخي ، لقد قمت بتثبيت كود ولاكن أواجه مشكلةإنه يعمل بشكل جيد هناht...
mansor2020 |24 ديسمبر 2020 |5

الالوان في ستايل اضافة News-Ticker-Benaceur لا تعمل

مرحبا الالوان في ستايل اضافة News-Ticker-Benaceur لا تعمل و شريط الاخبار معدل ع...
soufien |4 ديسمبر 2020 |1

اريد كود جعل الصور متساوية في الرئيسية

السلام عليكملديا مشكلة في موقعي الشريط الجانبي يعمل داخل المقالات جيداو...
mansor2020 |8 نوفمبر 2020 |8

  • خاصية @media screen لإخفاء عناصر css في شاشة ذات أبعاد معينة

2013/11/06
كاتب الموضوع: BENACEUR
التصنيف: دروس - css
خاصية @media screen لإخفاء عناصر 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


شارك هذا الموضوع على:

رابط الموضوع للنسخ

نبذة قصيرة عن BENACEUR

أقوم بتطوير وإنشاء المواقع خاصة الووردبريس وما يتعلق به كالإضافات حيث ساهمت بخمس إضافات من تطويري, ولذلك فموقعي هذا جعلته يهتم بالدرجة الأولى بتطوير ودعم الووردبريس, ثم الأنترنت والمواقع الإلكترونية بصفة عامة ...




أضف تعليقك | سجّل دخولك

تعليقاتك تحتاج في هذا الموضوع إلى المراجعة قبل النشر



  1. سيرة
    شعبان بلخير
    الذاتية
    ---------------------------
    السيرة الذاتية للمسجلين في الموقع
  2. شعبان بلخير ← علّقَ : 3 تعليقات
    زائر

    ميزة رائعة والله وأنتم رائعون على ما تقدمونه من معلومات