عندما ترى هذا العنوان، قد تعتقد أن هناك خطأ مطبعي آخر، تصميم الارتفاع سريع الاستجابة؟ هل أنت جاد؟ لأن "تصميم الويب سريع الاستجابة" يتحقق عادةً من المتصفحات بعروض وأحجام متعددة للأجهزة. نقوم عمومًا بضبط الاستجابة الأفقية عن طريق تقليل العرض، ولكن نادرًا ما أرى مراعاة للاستجابة الرأسية عن طريق تقليل ارتفاع المتصفح. في هذا الوقت، قد يكون لدى Zhimimi تقلب طفيف في قلبه، مع بعض الأسئلة: هل نحتاج إلى خفض ارتفاع المتصفح؟ نعم، دعونا نواصل الحديث عن ذلك.
عندما نقوم بتصميم موقع ويب، ليس من الجيد وضع افتراضات دون الاعتماد على البيانات الفعلية، كما أن مسؤولية الاختبار الأفقي والرأسي مهمة جدًا أيضًا.
بالنسبة للمصمم، يعد الافتراض غير المعقول أحد العوامل المهمة التي تدمر تصميم موقع الويب. على سبيل المثال، من غير الصحيح افتراض أنه يجب على المستخدمين تصفح موقع ويب باستخدام العرض الكامل للشاشة وارتفاعها. وبدلا من ذلك، يتعين علينا أن ننظر في السيناريو الأسوأ.
جيمي، هل تفهم؟ الحقيقة هي أنه ليس كل المستخدمين يستخدمون المتصفحات بالطريقة التي نتوقعها منهم. أجد أن موقع الويب يبدو سيئًا عندما أقوم بخفض ارتفاع المتصفح.
لا يعد تغيير حجم المتصفح (عموديًا) الطريقة الوحيدة لتغيير ارتفاع إطار العرض. عندما نفتح متصفح DevTools، فإنه سيحتل أيضًا ارتفاع المتصفح.
تمثل منطقة السهم في الصورة أعلاه ارتفاع إطار العرض الحالي. بالنسبة لشاشات الكمبيوتر المحمول الأصغر حجمًا، سنرى جزءًا صغيرًا فقط من صفحة الويب.
السؤال الحقيقي هو: هل يمكننا تحسين تجربة المستخدم عندما يكون ارتفاع إطار العرض أصغر؟ نعم، هذا ممكن، دعونا نلقي نظرة.
كمصممين ومطورين، يركز البعض منا فقط على تغييرات عرض التصميم ويتجاهل تغييرات ارتفاع إطار العرض. على سبيل المثال، أثناء التطوير، توفر واجهة المستخدم أشكالًا مختلفة من مكونات محددة عبر عروض عرض مختلفة. ولكن ماذا عن ارتفاعات إطار العرض المختلفة؟
في الصورة أعلاه، لدينا قائمة تنقل يتم ضبطها بناءً على ارتفاع إطار العرض. . إذا كان حجم إطار العرض صغيرًا (على سبيل المثال، iPhone 5)، فستظهر عناصر التنقل كشبكة ذات عمودين. غالبًا ما يتم التخلي عن طريقة التفكير هذه أو تحسينها حتى يقول شخص ما إنه يجب القيام بها.
هناك طريقتان مختلفتان لتحقيق المتطلبات المذكورة أعلاه في CSS:
استعلامات الوسائط العمودية وحدات منفذ العرضيعرف Zhimimi بالتأكيد كيفية استخدام استعلامات وسائط العرض في CSS.
@media (الحد الأدنى للعرض: 700 بكسل) { .element { /* افعل شيئًا.. */ }}الأقل استخدامًا هو استعلام الوسائط العمودي، الذي يتحقق من ارتفاع إطار العرض.
@media (min-height: 500px) { .element { /* افعل شيئًا.. */ }}/* أو */@media (orientation: Landscape) { .element { /* افعل شيئًا.. */ }}يمكن أن يساعد استخدام وحدات إطار العرض في توفير تجربة أفضل للمستخدمين. على سبيل المثال، يمكنك التحكم في التباعد الرأسي بين العناصر استنادًا إلى ارتفاع إطار العرض.
.hero__title { الهامش السفلي: calc(10px + 5vh);}
كما هو موضح أعلاه، بالنسبة للشاشات الأكبر حجمًا (مثل iMac 27 بوصة)، سيصبح الهامش السفلي كبيرًا جدًا. لدينا طريقتان لحل مشكلة الهوامش المفرطة.
استعلامات الوسائط وظيفة مقارنة CSSالطريقة الأولى (استعلامات الوسائط) مدعومة بشكل أكبر. إذا كانت الشاشة كبيرة، نحتاج إلى تعيين قيمة قصوى للهامش السفلي.
@media (الحد الأدنى للعرض: 2200 بكسل) { .hero__title { الهامش السفلي: 40 بكسل }}هناك طريقة أخرى تتمثل في استخدام وظيفة المقارنة CSSlamp(). تتمثل وظيفة وظيفة المشبك() في إرجاع نطاق من القيم.
.hero__title { الهامش السفلي: المشبك (10px، 5vh، 40px)؛}في هذا المثال، توجد منطقة قسم بها أقسام للعناوين والرسوم التوضيحية، وارتفاع القسم يساوي 100% من ارتفاع إطار العرض.
يبدو كل شيء على ما يرام حتى يصبح ارتفاع إطار العرض أصغر. لن يكون ارتفاع القسم كافيًا لاستيعاب الرسوم التوضيحية ومحتوى النص. ولذلك، فإنه سوف يتداخل مع أجزاء أخرى من الصفحة.
لاحظ كيف يتداخل الرسم التوضيحي مع القسم أدناه. يحدث هذا بسبب وجود مساحة رأسية كافية. ألق نظرة على HTML وCSS.
<p class="hero"> <p class="hero__wrapper"> <p class="hero__content"><!-- المحتوى --></p> <img class="hero__thumb" src="figure.png" البديل = "" /> </p></p>المغلق
.hero { الارتفاع: 100vh;}.hero__thumb { فليكس: 0 0 550px العرض: 550px;}فيما يلي عدة حلول لحل مثل هذه المشاكل:
قم بتعيين حجم ثابت (العرض والارتفاع) للرسم التوضيحي بدلاً من العرض فقط، وسيستمر نقص الارتفاع في حدوث هذه المشكلة. الارتفاع: 100vh فقط إذا كان ارتفاع إطار العرض أكبر من 700 بكسل (قد تختلف قيمة استعلام الوسائط حسب السياق).يمكننا الجمع بين الاثنين للحصول على حل أكثر قوة.
.hero__thumb { width: 400px; height: 300px;حسنًا، نحن نتفق الآن على أن استخدام استعلامات الوسائط العمودية هو الأفضل. ومع ذلك، فإن استخدام 100vh يعد أمرًا محفوفًا بالمخاطر لأنه حتى إذا قمنا بتحديد حجم الرسم التوضيحي، فقد لا نكون قادرين على فعل الشيء نفسه مع محتوى النص. إذا أصبح محتوى النص أطول، ستحدث نفس المشكلة مرة أخرى، انظر الشكل أدناه:
لحل هذه المشكلة، يمكننا استخدام الحد الأدنى للارتفاع بدلا من الارتفاع. بهذه الطريقة، إذا أصبح المحتوى أطول، فسوف يتوسع الارتفاع ولن يتداخل.
@media (الارتفاع الأدنى: 700 بكسل) { .hero { الحد الأدنى للارتفاع: 100vh }}تثبيت العنوان أثناء التمرير ليس بالأمر السيئ، ومع ذلك، نريد التأكد من أننا لا نقوم بتثبيت العنوان إلا عندما تكون المساحة الرأسية جيدة بما يكفي حتى تكون التجربة جيدة.
هذا موقع ويب خاص بالمناظر الطبيعية. هنا يمكننا أن نرى أنه عندما يكون الارتفاع صغيرًا جدًا، فإن الارتفاع الثابت سيشغل مساحة كبيرة ككل. هل هذا مهم حقًا للمستخدمين في معظم الحالات، فهو غير مهم، لأن المستخدم العادي لن يقوم بالتصغير لرؤية موقع ويب مثل هذا؟ حاليًا، إذا أردنا التحسين، يمكننا القيام بذلك. الفكرة هي استخدام استعلام الوسائط العمودي لتغيير الموضع الثابت إلى الموضع الثابت عندما يتم الحكم على أن الارتفاع أقل من ارتفاع معين.
@media (الارتفاع الأدنى: 700 بكسل) { .site-header { /* الموضع: ثابت أو الموضع: مثبت */ }}لقد لاحظت هذا النمط على شريط التنقل في Twitter.com. تتمثل الفكرة في الجمع بين استعلامات الوسائط العمودية ونمط الأولوية+.
عندما يتم تغيير حجم ارتفاع إطار العرض، تتم إزالة العناصر الأقل أهمية (الإشارات المرجعية والقوائم) وإلحاقها بقائمة المزيد، وهي حالة استخدام جيدة لاستعلامات الوسائط الرأسية.
.nav__item-- Secondary { العرض: لا شيء؛}@media (الارتفاع الأدنى: 700 بكسل) { .nav__item-- Secondary { العرض: كتلة }}إذا كان موقع الويب الخاص بنا يحتوي على شريط جانبي أو شريط جانبي، فعندما يكون ارتفاع إطار العرض صغيرًا، يمكننا تقليل التباعد الرأسي بين بعض عناصر التنقل، مما سيؤدي أيضًا إلى تحسين التصميم العام.
نحن نعلم أن المربع المشروط يجب أن يكون متمركزًا أفقيًا على الأقل. ومع ذلك، في بعض الأحيان نحتاج أيضًا إلى توسيطها عموديًا، ونستخدم الحل التالي بشكل عام:
.modal__body { الموضع: اليسار المطلق: 50%؛ الأعلى: 50%؛ تحويل: ترجمة (-50%، -50%)؛
ومع ذلك، هناك مشكلة عندما يصبح المحتوى طويلاً، حيث سيملأ النموذج الشاشة عموديًا ولن يتمكن المستخدم من تمريرها.
هناك عدة أسباب لهذه الحالة:
لا يحتوي المربع المشروط على ارتفاع ويتم توسيط الشكل عموديًا (سيؤدي ذلك إلى حدوث المشكلة بشكل أسرع)هنا هو CSS الذي تم إصلاحه:
.modal__body { الموضع: مطلق؛ اليسار: 50%؛ الأعلى: 3rem؛ التحويل: ترجمة X(-50%)؛}@media (الارتفاع الأدنى: 700 بكسل) { .modal__body { الأعلى: 50%؛ تحويل: ترجمة (-50%، -50% }})؛لاحظ أنني استخدمت الحد الأدنى للارتفاع والحد الأقصى للارتفاع. يتعلق الحد الأدنى للارتفاع بالحفاظ على المظهر الجيد للشكل حتى لو كان المحتوى قصيرًا، أما الحد الأقصى للارتفاع فهو يتعلق بتحديد ارتفاعه باستخدام قيمة محددة بدلاً من إضافة ارتفاع ثابت.
عند تصميم تجربة، من الأفضل التفكير من حيث العرض والارتفاع. قد يكون تغيير حجم متصفحك عموديًا غريبًا بعض الشيء، ولكن له مزاياه. في هذه المقالة، نناقش أهمية الاختبار الرأسي وكيفية إجراء الاختبار الرأسي. وأخيرا، نقترح بعض الأمثلة وحالات الاستخدام التي نأمل أن تكون مفيدة لمستخدمي Smartmi.
ما ورد أعلاه يتعلق بتصميم الارتفاع في صفحات الويب سريعة الاستجابة، هل تحتاج إلى تقليل ارتفاع المتصفح؟ لمزيد من التفاصيل، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على هذا الموقع!