أحدث البرامج التعليمية وتطوير الشبكة
×

CSS البرنامج التعليمي

CSS الصفحة الرئيسية CSS المقدمة CSS بناء الجملة CSS كيف CSS الألوان CSS خلفيات CSS حدود CSS هوامش CSS حشوة CSS عرض ارتفاع CSS نص CSS الخطوط CSS الروابط CSS قوائم CSS الجداول CSS صندوق نموذج CSS المخطط CSS العرض CSS العرض الاقصى CSS الوظيفة CSS تطفو CSS Inline-block CSS محاذاة CSS Combinators CSS الفئة المزيفة CSS شبه عنصر CSS شريط التنقل CSS القوائم المنسدلة CSS تلميحات CSS معرض الصور CSS صورة التعتيم CSS العفاريت صورة CSS ATTR المختارون أشكال CSS CSS عدادات

CSS3

CSS3 المقدمة CSS3 زوايا مدورة CSS3 صور الحدود CSS3 خلفيات CSS3 الألوان CSS3 التدرجات CSS3 ظلال CSS3 نص CSS3 الخطوط CSS3 2D التحويلات CSS3 التحويلات 3D CSS3 التحولات CSS3 الرسوم المتحركة CSS3 صور CSS3 أزرار CSS3 ترقيم الصفحات CSS3 أعمدة متعددة CSS3 واجهة المستخدم CSS3 مربع تحجيم CSS3 Flexbox CSS3 تساؤلات الإعلام CSS3 أمثلة MQ

CSS تصميم ويب مستجيب

تصميم ويب مستجيب مقدمة تصميم ويب مستجيب العرض تصميم ويب مستجيب شبكة عرض تصميم ويب مستجيب تساؤلات الإعلام تصميم ويب مستجيب صور تصميم ويب مستجيب فيديوهات تصميم ويب مستجيب الأطر

CSS Examples

CSS أمثلة CSS اختبار قصير CSS شهادة

CSS References

CSS مرجع CSS محددات CSS وظائف CSS إشارة أورال CSS Web Safe الخطوط CSS Animatable CSS وحدات CSS PX-EM محول CSS الألوان CSS قيم اللون CSS أسماء الألوان CSS3 دعم المتصفح

 

استجابة تصميم المواقع - وسائل الإعلام استعلامات


ما هو استعلام وسائل الإعلام؟

الاستعلام وسائل الإعلام هي تقنية CSS قدم في CSS3.

ويستخدم @media القاعدة تشمل كتلة من خصائص CSS فقط إذا كان شرط معين هو الصحيح.

مثال

إذا كانت نافذة المتصفح أصغر من 500px، ولون الخلفية تغيير إلى lightblue:

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}
انها محاولة لنفسك »

إضافة نقطة توقف

في هذا البرنامج التعليمي في وقت سابق قدمنا ​​صفحة ويب مع الصفوف والأعمدة، وكان يستجيب، ولكن لا تبدو جيدة على الشاشة الصغيرة.

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


سطح المكتب

هاتف

استخدام استعلام وسائل الاعلام لإضافة نقطة توقف في 768px:

مثال

عندما يحصل على الشاشة (نافذة المتصفح) أصغر من 768px، يجب أن يكون كل عمود بعرض 100٪:

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}
انها محاولة لنفسك »

تصميم دائما للموبايل الأولى

المحمول الأولى يعني تصميم للجوال قبل تصميم لسطح المكتب أو أي جهاز آخر (وهذا سيجعل من عرض الصفحة بشكل أسرع على الأجهزة الأصغر).

وهذا يعني أنه يجب علينا إجراء بعض التغييرات في CSS لدينا.

بدلا من تغيير الأنماط عندما يحصل على عرض أصغر من 768px، يجب علينا تغيير تصميم عندما يحصل على عرض أكبر من 768px. وهذا سيجعل لدينا تصميم موبايل أولا:

مثال

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
انها محاولة لنفسك »

نقطة توقف آخر

يمكنك إضافة العديد من نقاط التوقف كما تريد.

ونحن أيضا إدراج نقطة توقف بين أقراص والهواتف المحمولة.


سطح المكتب

لوح

هاتف

ونحن نفعل ذلك من خلال إضافة المزيد من استعلام واحد وسائل الاعلام (في 600px ل)، ومجموعة من الطبقات جديدة لأجهزة أكبر من 600px ل(ولكن أصغر من 768px):

مثال

لاحظ أن مجموعتين من الطبقات تكاد تكون متطابقة، والفرق الوحيد هو اسم ( col- و col-m- ):

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
انها محاولة لنفسك »

قد يبدو غريبا أن لدينا مجموعتين من الطبقات متطابقة، لكنه يتيح لنا الفرصة في HTML، لتقرر ما سوف يحدث مع الأعمدة في كل نقطة:

HTML مثال

لسطح المكتب:

أول والقسم الثالث على حد سواء تمتد 3 أعمدة لكل منهما. والجزء الأوسط تمتد 6 أعمدة.

بالنسبة للأجهزة اللوحية:

القسم الأول سوف تمتد 3 أعمدة، والثانية تمتد 9، وسوف يتم عرض الجزء الثالث تحت القسمين الأول، وسوف تمتد 12 عمودا:

<div class="row">
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div>

الاتجاه: عمودي / أفقي

ويمكن أيضا استفسارات وسائل الإعلام أن تستخدم لتغيير تصميم صفحة اعتمادا على التوجه للمتصفح.

هل يمكن أن يكون مجموعة من الخصائص CSS التي سيتم تطبيقها فقط عندما نافذة المتصفح هو أوسع من ارتفاعه، وهو ما يسمى التوجه "المشهد":

مثال

صفحة الويب سيكون له خلفية lightblue إذا كان التوجه هو في وضع أفقي:

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}
انها محاولة لنفسك »