التصنيف: دعم عام
التصنيف: دعم عام
  • كيفية انشاء قالب ابن child theme
  • طريقة عمل نافذة منبثقة عند الضغط على كلمة
  • إضافة رابط لجميع صور المقالات أوتوماتيكيا

كيفية انشاء قالب ابن child theme

السلام عليكم ورحمة الله لدي قالب من قوالب الووردبريس الافتراضية وأريد أن أعدل ع...
محمد رضا |15 مارس 2019 |6

طريقة عمل نافذة منبثقة عند الضغط على كلمة

السلام عليكمهناك خاصية في موقعكم لما اضغط على كلمة "عن الموقع" تفتح لي نافذة...
قرين |21 جـانفي 2019 |6

إضافة رابط لجميع صور المقالات أوتوماتيكيا

السلام عليكم أحتاج من فضلكم لكود php او java لجعل جميع الصور داخل المواضيع لها...
رشيد |15 جـانفي 2019 |2

  • خاصية @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

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

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




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

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



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

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