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

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 دعم المتصفح

 

استجابة تصميم الويب - فيديو


باستخدام الخاصية العرض

إذا كان width يتم تعيين الخاصية إلى 100٪، وسوف يكون مشغل الفيديو استجابة وتحجيم صعودا وهبوطا:

مثال

video {
    width: 100%;
    height: auto;
}
انها محاولة لنفسك »

لاحظ أنه في المثال أعلاه، لاعب الفيديو يمكن زيادتها إلى أن تكون أكبر من حجمها الأصلي. والحل الأفضل، في كثير من الحالات، سوف يكون لاستخدام max-width الملكية بدلا من ذلك.


باستخدام ماكس عرض الملكية

إذا كان max-width يتم تعيين الخاصية إلى 100٪، ومشغل فيديو يخفضوا إذا كان لديه، ولكن لم تدرج حتى تكون أكبر من حجمها الأصلي:

مثال

video {
    max-width: 100%;
    height: auto;
}
انها محاولة لنفسك »

إضافة الفيديو إلى صفحة ويب مثال

نحن نريد لإضافة الفيديو في الصفحة المثال على شبكة الانترنت. سيتم تغيير حجم الفيديو لاتخاذ دائما كل المساحة المتاحة:

مثال

video {
    width: 100%;
    height: auto;
}
انها محاولة لنفسك »