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

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

 

استجابة تصميم الموقع - منفذ العرض


ما هو إطار العرض؟

والعرض هو مجال للمستخدم مرئية من صفحة ويب.

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

قبل الاقراص والهواتف المحمولة، وتصميم صفحات الويب فقط لشاشات الكمبيوتر، وكان من الشائع لصفحات الويب لديها تصميم ثابت وحجم ثابت.

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

ولم يكن هذا الكمال !! ولكن حل سريع.


وضع إطار العرض

قدم HTML5 طريقة للسماح لمصممي الويب من السيطرة على أكثر من العرض، من خلال <meta> العلامة.

يجب أن تشمل ما يلي <meta> عنصر العرض في جميع صفحات الويب الخاصة بك:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

و <meta> عنصر العرض يعطي تعليمات متصفح على كيفية السيطرة على أبعاد الصفحة والتحجيم.

و width=device-width جزء يحدد عرض الصفحة لمتابعة الشاشة عرض الجهاز (والتي سوف تختلف اعتمادا على الجهاز).

و initial-scale=1.0 الجزء يحدد مستوى التكبير الأولي عند تحميل الصفحة الأولى من قبل المتصفح.

هنا مثال على صفحة ويب دون العلامة الوصفية لإطار العرض، ونفس صفحة الويب مع العلامة الوصفية العرض:

نصيحة: إذا كنت تتصفح هذه الصفحة مع الهاتف أو الكمبيوتر اللوحي، يمكنك النقر على الرابطين لمعرفة الفرق.



حجم المحتوى على منفذ العرض

وتستخدم للمستخدمين انتقل المواقع عموديا على كل من سطح المكتب والأجهزة المحمولة - ولكن ليس أفقيا!

لذلك، إذا اضطر المستخدم للتمرير أفقيا، أو التصغير، لرؤية صفحة ويب كاملة أنه يؤدي إلى تجربة المستخدم الفقيرة.

بعض قواعد إضافية لمتابعة:

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

2. لا تدع محتوى يعتمد على عرض العرض خاص لتقديم جيدا - منذ أبعاد الشاشة والعرض بالبكسل CSS تختلف على نطاق واسع بين الأجهزة، يجب أن المحتوى لا يعتمد على عرض العرض خاص لتقديم جيدا.

3. استخدام CSS استفسارات وسائل الإعلام لتطبيق التصميم مختلفة للشاشات الصغيرة والكبيرة - وضع كبيرة بعرض CSS المطلقة لعناصر الصفحة، سوف تتسبب في العنصر أن تكون واسعة جدا لمنفذ العرض على جهاز أصغر. بدلا من ذلك، النظر في استخدام القيم عرض النسبية، مثل العرض: 100٪. أيضا، يجب الحرص على استخدام القيم الكبيرة لتحديد المواقع المطلقة. فإنه قد يتسبب في عنصر ليسقط خارج إطار العرض على الأجهزة الصغيرة.