وبمستر مارکت مکانی برای یافتن مشتریان جدید

آموزش طراحی سایت ریسپانسیو

برای اینکه بتوانید یک قالب واکنشگرا طراحی کنید باید با نحوه استفاده از متا تگ viewport و مدیا کوئری ها آشنا باشید.

برای طراحی ریسپانسیو ابتدا باید متا تگ viewport را به سورس وب سایت خود اضافه کنید و سپس به سراغ فایل CSS بروید و مدیا کوئری ها را به این فایل اضافه کنید.

قالب را باید برای چه دستگاههای طراحی کرد؟

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

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

فریم ورک بوت استرپ دستگاههای الکترونیکی را به این صورت دسته بندی کرده است:

Phones: <768px
Tablets: ≥768px
Medium Desktops: ≥992px
Large Desktops: ≥1200px

چگونه عناصر وب سایت را در دستگاههای مختلف نمایش دهیم؟

برای اینکه بتوانید پهنای عناصر صفحات وب سایت را در دستگاههای مختلف مدیریت کنید باید از max-width و min-width استفاده کنید.

به عنوان مثال اگر یک تگ با آی دی seosem در سورس وب سایت شما وجود دارد، به کمک کد زیر می توانید عرض این تگ را در گوشیهای موبایل به گونه ای تنظیم کنید که همواره در وسط صفحه نمایش داده شود و اگر ابعاد گوشی کوچک تر از 767px باشد، ابعاد این تگ متناسب با ابعاد گوشی تغییر کند:

@media screen and (max-width: 767px) {
#seosem { width: 100%; margin:0 auto; }
}

حال اگر بخواهید این تگ را در تبلتها در سمت راست نمایش دهید باید یک مدیا کوئری دیگر اضافه کنید و استایل آن را به این صورت تعیین کنید:

@media screen and (min-width: 768px) and (max-width: 991px){
#seosem { width: 150px; float: right; }
}

با توجه به اینکه طراحان وب برای ساید بار خود معمولا از آی دی right استفاده می کنند، شما نیز می توانید در کدهای فوق بجای seosem از right استفاده کنید! زیرا تکه کدهای فوق برای ساید بارها قابل استفاده است.

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



طراحی وبسایت
10:03 - 1394/09/01
2
1
خیلی مفید بود ممنون از دوستان عزیز زحمت کش در سایت - شاد و سرزنده باشید
متن نظر *