راهنمای مبتدیان برای طراحی وب پاسخگو (نمونه های کد و نمونه های طرح بندی)

  صفحه نمایش @ و (min-width: 780px) {
. full-width-img {
حاشیه: خودکار؛
عرض: 90٪؛
}  

اگر صفحه حداقل 780 پیکسل عرض داشته باشد ، تصاویر کلاس “تمام عرض-img” 90٪ صفحه را اشغال می کنند و به طور خودکار با حاشیه هایی به همان اندازه گسترده می شوند.

طرح بندی مایعات h3>

طرح مایع بخشی اساسی در طراحی پاسخگو مدرن است. در زمان های خوب قدیمی ، برای هر عنصر HTML ، مانند 600 پیکسل ، یک مقدار ثابت تعیین می کنید.

یک طرح مایع در عوض به مقادیر پویا مانند درصدی از عرض نمای مشاهده متکی است.

نمونه طرح مایع

این روش به طور پویا اندازه های مختلف عناصر ظرف را بر اساس اندازه صفحه نمایش افزایش یا کاهش می دهد.

طرح Flexbox h3>

در حالی که طرح مبتنی بر درصد روان است ، بسیاری از طراحان و توسعه دهندگان وب احساس کردند که آن به اندازه کافی پویا یا انعطاف پذیر نیست. Flexbox یک ماژول CSS است که به عنوان یک روش کارآمد تر برای قرار دادن چندین عنصر طراحی شده است ، حتی زمانی که اندازه محتوای داخل ظرف مشخص نیست.

یک ظرف فلکس برای پر کردن فضای خالی موجود ، وسایل را گسترش داده یا آنها را کوچک می کند تا از سرریز شدن آن جلوگیری کند. این ظروف فلکس دارای تعدادی ویژگی خاص مانند محتوای توجیه پذیر است که نمی توانید با یک عنصر HTML معمولی ویرایش کنید.

ظرف فلکس باکس

این یک موضوع پیچیده است ، بنابراین اگر می خواهید از آن در طراحی خود استفاده کنید ، باید راهنمای flexbox ترفندهای CSS .

تصاویر پاسخگو h3>

ابتدایی ترین تکرار تصاویر واکنش گرا همان مفهوم طرح سیال را دنبال می کند که از یک واحد پویا برای کنترل عرض یا ارتفاع استفاده می کند. نمونه کد CSS که قبلاً به آن پرداختیم ، قبلاً این امر را محقق کرده است:

  img {
عرض: 100٪
}  

واحد٪ تقریباً به یک درصد از عرض یا ارتفاع دهانه نما نزدیک می شود و اطمینان حاصل می کند که تصویر متناسب با صفحه باقی بماند.

مشكل این روش این است كه هر كاربری مجبور است تصویر كاملاً بزرگ را حتی در تلفن همراه بارگیری كند.

برای ارائه نسخه های مختلف که برای دستگاه های مختلف مقیاس بندی شده اند ، باید از ویژگی HTML srcset در برچسب های img خود استفاده کنید تا بیش از یک اندازه تصویر را برای انتخاب انتخاب کنید.

وردپرس به طور خودکار از این قابلیت برای تصاویر موجود در پست ها یا صفحات استفاده می کند.

سرعت h3>

هنگامی که می خواهید طرحی پاسخگو برای وب سایت خود ایجاد کنید ، سرعت بارگیری باید از اولویت های اصلی باشد .

صفحاتی که در 2 ثانیه بارگیری می شوند به طور متوسط ​​ نرخ گزاف گویی 9٪ ، در حالی که صفحاتی که 5 ثانیه طول می کشد منجر به 38٪ گزاف گویی می شود.

روش شما برای پاسخگویی نباید اولین ارائه صفحه شما را بیش از آنچه لازم است مسدود یا به تأخیر بیندازد.

به چندین روش می توانید صفحات خود را سریعتر کنید. بهینه سازی تصاویر خود ، اجرای حافظه پنهان ، کوچک سازی ، استفاده از طرح کارآمد CSS ، اجتناب از ارائه ارائه- مسدود کردن JS ، و بهبود مسیر رندر حیاتی خود ایده های خوبی هستند که باید در نظر بگیرید.

شما همچنین می توانید Google AMP را برای صفحات تلفن همراه خود پیاده سازی کنید ، اما در مطالعه موردی Google AMP ما ، منجر به افزایش قیمت موبایل 59 درصد کاهش یافت.

نقاط شکست پاسخگو معمول h2>

برای کار با س quالات رسانه ، باید در مورد “نقاط شکست پاسخگو” یا نقاط شکست اندازه صفحه تصمیم بگیرید. نقطه شکست عرض صفحه است که در آن برای اجرای سبک های جدید CSS از یک جستجوی رسانه استفاده می کنید.

اندازه صفحه رایج h3>

• موبایل: 360 x 640
• موبایل: 375 66 667
• موبایل: 360 7 720
• iPhone X: 375 x 812
• Pixel 2: 411 x 731
• قرص: 1024 x 768
• لپ تاپ: 66۶۸ 13 ۱۳۶۶
• لپ تاپ یا دسکتاپ با وضوح بالا: 1920 10 1080

اگر رویکرد همراه اول را برای طراحی انتخاب کنید ، با یک ستون تک و اندازه قلم های کوچکتر به عنوان پایه ، نیازی به قرار دادن نقاط شکست تلفن همراه نیست – مگر اینکه بخواهید طراحی را برای مدل های خاص بهینه کنید .

طرح اول موبایل (تصویر منبع: silocreativo.com)

بنابراین می توانید فقط با دو نقطه انفصال ، یک طرح اصلی پاسخگو ایجاد کنید ، یکی برای تبلت ها و دیگری برای لپ تاپ ها و رایانه های رومیزی.

Bootstrap’s Responseive Breakpoints

به عنوان یکی از اولین و محبوب ترین چارچوب های پاسخگو ، بوت استرپ حمله به طراحی وب ثابت را هدایت کرد و به ایجاد اولین طراحی تلفن همراه کمک کرد به عنوان یک استاندارد صنعتی.

در نتیجه ، بسیاری از طراحان تا به امروز هنوز از نقاط شکست عرض صفحه نمایش Bootstrap پیروی می کنند.

نقاط شکست پاسخگو بوت استرپ

آنها از نمایشگرهای رسانه ای برای هدف قرار دادن تلفن های منظره (576px) ، تبلت ها (768px) ، لپ تاپ ها (992px) و صفحه های دسک تاپ فوق العاده بزرگ (1200px) استفاده می کنند.

چگونه می توان وب سایت خود را پاسخگو دانست h2>

اکنون که با بلوک های ساختمانی آشنا شدید ، وقت آن است که وب سایت خود را پاسخگو نشان دهید.

دامنه های جستجوی رسانه خود را تنظیم کنید (نقاط شکست پاسخگو) h3>

دامنه های جستجوی رسانه خود را بر اساس نیازهای منحصر به فرد طراحی خود تنظیم کنید. به عنوان مثال ، اگر می خواهیم از استانداردهای Bootstrap برای طراحی خود پیروی کنیم ، از عبارت جستجوی رسانه زیر استفاده می کنیم:

• 576 پیکسل برای تلفن های پرتره
• 768 پیکسل برای رایانه های لوحی
• 992 پیکسل برای لپ تاپ ها
• 1200px برای دستگاه های بزرگ

عناصر چیدمان اندازه با درصد یا یک چیدمان شبکه CSS ایجاد کنید h3>

اولین و مهمترین مرحله تنظیم اندازه های مختلف برای عناصر مختلف طرح بندی بسته به درخواست رسانه یا نقطه شکست صفحه است.

تعداد کانتینرهای طرح بندی به طراحی بستگی دارد ، اما بیشتر وب سایت ها بر روی عناصر ذکر شده در زیر تمرکز دارند:

چیدمان مشترک

با استفاده از اولین رویکرد تلفن همراه ، می توانید عناصر اصلی طرح بندی را مانند این (با هیچ استعلام رسانه ای برای سبک های اصلی تلفن های همراه وجود ندارد):

  # wrapper {width: 95٪؛ حاشیه: 0 خودکار؛ }

#header {width: 100٪؛ }

# محتوا {عرض: 100٪؛ }

# نوار کناری {عرض: 100٪؛ }

# فوتور {عرض: 100٪؛ }

// دستگاه های کوچک (تلفن های افقی ، 576 پیکسل و بالاتر)

media (عرض حداقل: 576 پیکسل) {

// دستگاه های متوسط ​​(تبلت ، 768 پیکسل به بالا)

media (عرض حداقل: 768 پیکسل) {

# پوشاننده {عرض: 90٪؛ حاشیه: 0 خودکار؛ }

# محتوا {عرض: 70٪؛ شناور به سمت چپ؛ }

# نوار کناری {عرض: 30٪؛ شناور: درست؛ }

// دستگاه های بزرگ (دسک تاپ ، 992px به بالا)

media (عرض حداقل: 992px) {...}

}

// دستگاه های فوق العاده بزرگ (دسک تاپ های بزرگ ، 1200 پیکسل به بالا)

media (عرض حداقل: 1200px) {

# پوشاننده {عرض: 90٪؛ حاشیه: 0 خودکار؛ }

}  

در یک روش مبتنی بر درصد ، ویژگی “float” کنترل می کند که کدام عنصر از صفحه نمایش ، چپ یا راست نمایش داده شود.

اگر می خواهید فراتر از اصول اولیه بروید و یک طراحی پاسخگو پیشرفته ایجاد کنید ، باید با طرح flexbox CSS و ویژگی های آن مانند اندازه جعبه و flex .

پیاده سازی تصاویر پاسخگو h3>

یکی از راه های اطمینان از شکستن تصاویر ، صرفاً استفاده از یک مقدار پویا برای همه تصاویر است ، همانطور که قبلاً توضیح دادیم.

  img {
عرض: 100٪
}  

اما با این وجود بار بازدید کنندگان تلفن همراه شما هنگام دسترسی به وب سایت شما را کاهش نمی دهد.

هنگام افزودن تصاویر به صفحات خود ، حتماً یک srcset داشته باشید که با اندازه های مختلف عکس شما باشد.

انجام این کار به صورت دستی بسیار زمانبر است ، اما با یک CMS مانند وردپرس ، هنگامی که پرونده های رسانه ای را بارگذاری می کنید به طور خودکار اتفاق می افتد.

تمرکز اصلی طراحی وب پاسخگو بر پاسخگویی طرح است. بلوک ها ، عناصر و رسانه ها. متن اغلب به عنوان یک فکر بعدی تلقی می شود.

اما برای یک طراحی کاملاً پاسخگو ، باید اندازه قلم خود را تنظیم کنید a > به طور مناسب برای مطابقت با اندازه صفحه نمایش.

ساده ترین راه برای انجام این کار تعیین مقدار استاتیک برای اندازه قلم است ، مانند 22 px و آن را در هر پرسش رسانه متناسب کنید .

اندازه قلم در مقابل نقاط پراکندگی اندازه نمایش

می توانید چندین عنصر متن را همزمان با استفاده از ویرگول برای جدا کردن هر یک مورد هدف قرار دهید.

  @ media (min-width: 992px) {

بدنه ، p ، a ، h4 {

اندازه قلم: 14px؛

}

}  

پاسخگویی آزمون h3>

ابتدا ، شما می خواهید موبایل پسند بودن سایت خود را با مورد آزمایش قرار دهید. تست تلفن همراه گوگل . به سادگی URL وب سایت خود را وارد کنید و برای دریافت نتایج بر روی دکمه “URL test” کلیک کنید.

تست سازگار با موبایل Google

اگر واکشی سایت شما مدتی طول کشید نگران نباشید. این سرعت بارگذاری صفحه شما را نشان نمی دهد.

اگر مراحل ذکر شده در این مقاله را دنبال کردید ، باید بگویید که شما یک وب سایت مناسب موبایل دارید.

سپس می خواهید سایت خود را در ابعاد مختلف صفحه با ابزاری مانند ابزارهای توسعه دهنده Chrome .

CTRL + Shift + I را در رایانه های Windows یا Command + Option + I را در Mac فشار دهید تا نمای دستگاه مربوطه باز شود. از اینجا می توانید دستگاه تلفن همراه یا رایانه لوحی مورد نظر خود را برای آزمایش پاسخگویی طراحی خود انتخاب کنید.

تست طرح های پاسخگو و موبایل در Chrome

چند سوال وجود دارد که می خواهید هنگام انجام این فرآیند به آنها پاسخ دهید.

• آیا طرح با مقدار صحیح ستون ها مطابقت دارد؟
• آیا محتوا به خوبی در داخل عناصر چیدمان و ظروف در صفحه های مختلف قرار دارد؟
• آیا اندازه قلم ها متناسب با هر صفحه است؟

واحدها و مقادیر CSS برای طراحی پاسخگو h2>

CSS دارای هر دو واحد اندازه گیری مطلق و نسبی است. به عنوان مثال یک واحد طول مطلق یک سانتی متر یا یک پیکسل است. واحدهای نسبی یا مقادیر دینامیکی به اندازه و وضوح صفحه یا اندازه قلم عنصر ریشه بستگی دارد.

PX vs EM vs REM vs Viewport Unit برای طراحی پاسخگو h3>

• PX – یک پیکسل واحد
• EM – واحد نسبی بر اساس اندازه قلم عنصر است.
• REM – واحد نسبی بر اساس اندازه قلم عنصر است.
• VH، VW -٪ ارتفاع یا عرض ویوپور.
• ٪ – درصد عنصر والد.

یک طراح یا توسعه دهنده وب جدید احتمالاً باید با پیکسل هایی برای متن همراه باشد زیرا آنها مستقیم ترین واحد طول CSS هستند.

اما هنگام تنظیم عرض و حداکثر عرض تصاویر و سایر عناصر ، استفاده از٪ بهترین راه حل است. این روش اطمینان حاصل می کند که اجزا با اندازه صفحه نمایش هر دستگاه تنظیم می شوند.

نمونه های طراحی پاسخگو h2>

در زیر به چند نمونه از طراحی وب پاسخگو از صنایع مختلف خواهیم پرداخت – و از آنچه آنها انجام می دهند درست و غلط یاد می گیریم.

1 روزنامه آنلاین: نیویورک تایمز h3>

NYT در موبایل ، تبلت و لپ تاپ

2.

3

4

5.

خلاصه h2>

---

اگر از این مقاله لذت بردید ، پس از آن دوست دارید Kinsta’s WordPress platform hosting. وب سایت خود را توربوشارژ کرده و از تیم پیشکسوت وردپرس ما پشتیبانی 24/7 ساعته دریافت کنید. زیرساختهای Google Cloud ما بر مقیاس گذاری خودکار ، عملکرد و امنیت تمرکز دارند. بگذارید تفاوت Kinsta را به شما نشان دهیم! برنامه های ما را بررسی کنید a >