آموزش صحیح نقاط شکست یا همان BreakPoint در طراحی ریسپانسیو

آموزش صحیح نقاط شکست یا همان BreakPoint در طراحی ریسپانسیو

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

 

چرا طراحی واکنشگرا :

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

 

 

اصول طراحی واکنشگرا :

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

 

 

نقاط شکست :

در استاندارد ترین حالت طراحی واکنشگرا ، استفاده از  نقاط شکست و یا BreakPoint می باشد ، به طوری که صفحه نمایش ها را یه ۴ قسمت اصلی اعم از :

  • صفحه نمایش های خیلی کوچک
  • صفحه نمایش های کوچک
  • صفحه نمایش های متوسط
  • صفحه نمایش های بزرگ

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

یک تصوی وجود دارد که شمارا در این مسیر بسیا راهنمایی میکند :

آموزش صحیح نقاط شکست یا همان BreakPoint در طراحی ریسپانسیو

در تصویر بالا مشاهده میکنید که برای صفحه نمایش های بسیا کوچک بازه ۰ تا ۴۸۰ پیکسل را در نظر گرفته است ، برای صفحه نمایش های کوچک بازه ۴۸۱ الی ۷۶۸ پیکسل را در نظر گرفته و برای صفحه نمایش های متوسط بازه ۷۶۸ پیکسل الی ۱۲۷۹ پیکسل و برای صفحه نمایش بزرگ عدد ۱۲۸۰ پیکسل به بالا را در نظر گرفته است .

برای استفاده از این نقاط شکست از الگوی زیر برای انوع نقاط استفاده می کنیم ، مانند :

@media only screen and (min-width: 480px) {

    body {

        background-color: lightblue;

    }

}

در مقاله وب سایت آیم سئو بعدی تفاوت استفاده از max-width و min-width را که بسیار مهم میباشد را توضیح خواهیم داد .

 

تاریخ انتشار : ۱۵ بهمن