قبل بضع سنوات ، كان من السهل نسبيًا تصميم وإنشاء مواقع الويب. كانت مواقع الويب أكثر بساطة ، وتمت مشاهدتها على أجهزة الكمبيوتر المكتبية والمحمولة مع اختلاف بسيط في أحجام الشاشات. اليوم مع استيلاء الأجهزة المحمولة على وقت التصفح للمشاهدين ، يمكن مشاهدة موقع على شاشة هاتف ذكي بحجم 4.8 بوصة ، أو جهاز فابل 5 بوصة ، أو قرص 7 بوصة أو أي حجم بينهما.
إذًا ، كيف تضمن عرض موقعك على الويب بشكل صحيح عبر أنواع الأجهزة وأحجام الشاشات؟
الحل اقترح لأول مرة من قبل إيثان ماركوت ، عندما استكشف طرقًا لجعل تصاميم موقع الويب مستجيبة ، أي اجعلها تتغير وفقًا لحجم الشاشة. إن تصميم موقع الويب المتجاوب هو الذي يجعل استخدام CSS سهلاً لضمان تقديم صفحات الويب جيدًا عبر نطاق واسع من أحجام الشاشات - دون اللجوء إلى إعادة توجيه عناوين URL أو تقديم شفرة HTML و CSS ديناميكيًا ، وذلك وفقًا لـ UserAgent. إنها ليست تقنية أو معيارًا ، بل مجموعة من مبادئ التصميم التي تساعد في تحقيق النتيجة.
على مدى السنوات القليلة الماضية ، ظهرت العديد من النماذج المتجاوبة وأطر CSS وموضوعات WordPress. على سبيل المثال ، من الممكن إنشاء موقع ويب مستجيب في WordPress دون كتابة سطر واحد من التعليمات البرمجية.
لكن مصمم الويب الحقيقي غير راض عن استخدام النماذج فقط. سوف تبذل الجهد لفهم عناصر تصميم الويب سريع الاستجابة ، من أجل استخدامها بفعالية.
حتى اليوم ، سنلقي نظرة على التقنيات الأساسية الثلاثة التي تحتاج إلى إتقانها ، فستكون مصممًا فعال الاستجابة.
تتيح لك استعلامات الوسائط تصميم تخطيطات مختلفة لأنواع وسائط مختلفة مثل الشاشة والطباعة والتلفزيون والأجهزة المحمولة ، إلخ. اعتمادًا على نوع الوسائط ، يمكنك تكوين النمط والخط والعناصر الأخرى للصفحة.
المقدمة في CSS3 ، تسمح استعلامات الوسائط لمصمم تخصيص عرض المحتوى لتتناسب مع مجموعة محددة من أنواع أجهزة الإخراج. وهي تتكون من تعريف نوع الوسائط وتعبير واحد أو أكثر من ميزات الوسائط التي يتم تقييمها إلى true أو false.
يشمل نطاق أنواع الوسائط المحمولة باليد والشاشة والتلفزيون والطباعة والإسقاط. تتضمن ميزات الوسائط ، على سبيل المثال لا الحصر ، ارتفاع الجهاز وعرضه ونسبة العرض إلى الارتفاع ودقة الوضوح ومؤشر الألوان وكذلك ارتفاع وعرض نافذة المتصفح.
دعونا نأخذ مثالا أساسيا. تخيل أنك تريد تصغير حجم النص على الأجهزة الصغيرة ، مثل الهواتف. قد يبدو الاستعلام عن ذلك مثل:
p {font-size:1em;}@media all and (max-width:400px) {p {font-size:0.8em;}}الآن ، سيتم تعيين حجم خط فقراتك على 1em ، إلا إذا كان عرض المستعرض أقل من 400 بكسل ، وفي هذه الحالة سوف يتقلص إلى 0.8em.
من واقع خبرتي ، فإن أفضل طريقة لتصميم تخطيط سريع الاستجابة هي أولاً إنشاء ورقة أنماط افتراضية رئيسية تحتوي على العناصر الهيكلية الرئيسية. بعد ذلك ، يمكنك إضافة استعلامات الوسائط لتخصيص العناصر استنادًا إلى التنسيق أو عناصر الجهاز الأخرى. إذا كانت أكثر من مجموعة من القواعد ، فقد يكون من الأفضل نقلها إلى ورقة فرعية منفصلة - والتي يمكنك تحميلها بشكل انتقائي في وقت لاحق. فيما يلي كيفية عمل ذلك:
تتحقق قطعة الرمز هذه ما إذا كان الجهاز يدويًا في الوضع الأفقي بعرض الجهاز أقل من 720 بكسل ، وإذا كان الأمر كذلك ، فسيحمِّل ورقة أنماط tablet_layout.css .
لاحظ أن عرض الميزات ، الارتفاع ، الحد الأدنى / العرض ، الحد الأدنى / الارتفاع الأقصى يشير إلى عرض وارتفاع إطار المتصفح. يتم التحكم في عرض الجهاز وارتفاعه من خلال عرض الجهاز وارتفاع الجهاز و min / max- device width و min / max-device height . إذا كنت تريد البحث عن مزيد من الأمثلة باستخدام استعلامات الوسائط MDN لديه جولة جيدة.
"Fluid grid" هو مصطلح يستخدم لوصف تخطيط يتم ترميزه بنسب نسبية للعناصر المختلفة ، بدلاً من قيم البكسل الثابتة.
تستخدم تخطيطات CSS التقليدية شبكات عرض ثابتة لوضع العناصر. لم يعد نهج العرض الثابت يعمل اليوم بعد أن أصبح لدينا شاشات أجهزة تتراوح من 3 بوصات إلى بضعة أقدام. في تصميم شبكة مرنة ، يتم ترميز كل شيء من حيث نسبته النسبية إلى العنصر الأساسي أي بدلاً من تحديد ارتفاع وعرض كل عنصر ؛ يتم منحها نسبة أو حجم نسبي.
تخيل أن لديك أربعة أعمدة. لجعل هذا السائل ، بدلاً من تحديد كل بكسل عرضه 200 بكسل ، يجب عليك تحديد 0.2083٪ (بمعنى 200/960). على الأقل ، هذا هو المبدأ. يتطلب إنشاء شبكة مرنة بالكامل الكثير من الرعاية. إنها واحدة من تلك الحالات النادرة التي أوصي بها باستخدام الأدوات المخصصة. شبكة صغيرة السوائل ، نظام شبكة متغير و شبكة خط الأساس السائل هي بعض البدائل الرائعة لكتابة الشبكة السائلة الخاصة بك من الصفر.
تعتبر الصور مرنة عند عرض الصورة بالحجم الأصلي ، طالما أن حاوية HTML تدعمها ، ولكن عندما تنكمش نافذة المتصفح ، يتم قياس الصورة لتلائمها.
حتى إذا كانت بقية التصميم مرنة وسريعة الاستجابة ، فلن يتم عرضها جيدًا ، إذا لم يتم قياس جميع المكونات. هذا يمكن أن تصبح صعبة مع الصور ومقاطع الفيديو. ستبدو الصورة الواسعة التي يبلغ حجمها 700 بكسل رائعة على سطح المكتب ، ولكن يتم تقطيعها عند عرضها على جهاز لوحي مقاس 320 بكسل. تستخدم معظم التصاميم التفاعلية الحديثة خاصية عرض max- CSS لجعل حجم الصور. (كانت هذه الطريقة اقترح لأول مرة من قبل ريتشارد بتلر .)
img {max-width: 100%;}ستضمن هذه الخطوط القليلة عدم قص الصورة ، من خلال تعيين عرض الصورة القصوى على 100٪ من الحاوية. إذا أصبحت نافذة المتصفح أو الشاشة أصغر ، فإن هذه القطعة من شفرة CSS ستقلص الصورة بالتناسب. يتم ضبط الارتفاع تلقائيًا ، مع الحفاظ على نسبة العرض إلى الارتفاع مقفلة.
يمكنك بدلاً من ذلك قفل الصورة لشغل نسبة شاشة عمودية معينة مثل هذه
img {max-height: 75%;}(تأكد من عدم استخدام كل من خصائص max-height و max-width معاً.)
يمكن أيضًا ربط حجم الصورة بحجم النص بدلاً من العنصر الرئيسي باستخدام em ، كما يلي:
img {width: 30em;}إذا كانت الصورة تحتوي على نص ، فقد تحتاج إلى تحديد الحد الأدنى / الحد الأقصى للحجم ، للتأكد من أن النص قابل للقراءة. يمكنك تحديده على النحو التالي:
img {width: 30em;max-width: 500px;min-width: 100px;}يمكن استخدام نفس الأساليب لقياس مقاطع الفيديو ، على سبيل المثال:
.video embed, .video object, .video iframe { width: 100%; height: auto; }التصميم المستجيب هو مستقبل صناعتنا ، ولكن مع العديد من التقنيات المختلفة التي تحلق حولها ، يصعب في كثير من الأحيان مواكبة ذلك. إتقان هذه التقنيات 3 بسيطة ، وعليك أن تكون 90 ٪ من الطريق لكونها مصمم تستجيب.