031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » bootstrap » آموزش طراحی سایت ریسپانسیو responsive واکنش گرا

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

۷ام تیر ۱۳۹۳
پشتیبانی وب یار
0
164

آموزش ساده طراحی سایت ریسپانسیو responsive واکنش گرا در تبلت و موبایل در قالب پروژه منو

ریسپانسیو به طراحی سایت با قابلیت های نمایش یوزر فرندلی userfrendly سایت در گجت ها گویند

برای طراحی سایت ریسپانسیو بعد از طراحی قابل درک از سه سایز وبسایت تان ابتدا در فایل هدر قالبتان دستورات ریسپانسیورا وارد کنید:

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

<meta name=”apple-mobile-web-app-capable” content=”yes”>

<meta name = “viewport” content = “width =device-width, initial-scale = 1.0”>

حالا بروی css قالب کار میکنیم.

مقدار width ها را برابر صد در صد می دهیم .

width:100%;

در طراحی ها از منوهای بالای سایت از  آیکنی با قابلیت display با مقدار hidden  استفاده می کنیم.(چون در حالت ریسپانسیو در تبلت فقط آیکن نمایش داده می شود.)

در پایان آموزش همه کد ها و فایل html قالب موجوداست

حالا تعیین میکنیم که سایز گجت ما در چه ابعادی است

@media only screen and (max-width:1024px;){

مقادیر دیگر سی اس اس

#menu-icon { display:inline-block;}کد نمایش آیکن منو بجای منو

}

آموزش طراحی سایت با قابلیت ریسپانسیو responsive واکنش گرا تبلت موبایل

به همن راحتی سایت رسپونسیو شد

دانلود فایل آموزش 

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

 

مرورگرهای موبایل برای سازگاری با سایت‌هایی که در گذشته طراحی شده‌اند، از مفهومی به نام Viewport برای نمایش سایت‌ها استفاده می‌کنند. Viewport فضایی مجازی است که معمولا حدود ۱۰۰۰ پیکسل عرض دارد. مرورگر موبایل سایت را در این فضای مجازی نمایش می‌دهد و سپس این تصویر را در فضای واقعی نمایشگر موبایل یا تبلت قرار می‌دهد.
نخستین گام در طراحی واکنش‌گرا، اطلاع رسانی به مرورگر برای تغییر اندازه‌ی Viewport است تا به جای ۱۰۰۰ یا ۹۸۰ پیکسل پیش‌فرض، فضای مورد نظر برنامه‌نویس را به Viewport اختصاص دهد.
تغییر اندازه‌ی Viewport با استفاده از تگ meta در سرآمد فایل html به انجام می‌رسد.

<head>
<meta name="viewport" content="width=480">
</head>

همان‌گونه که مشاهده می‌کنید، در مثال بالا عرض Viewport برابر ۴۸۰ پیکسل مشخص شده است. این مقدار حداقل مقدار ممکن است. چنانچه عرض نمایشگر موبایل بیش از ۴۸۰ پیکسل باشد، عرض Viewport هم افزایش خواهد یافت.
شیوه‌ی دیگر در تغیین مقدار Viewport، تعیین آن با عرض فیزیکی نمایشگر است. برای این کار از کد زیر استفاده می‌شود:

<meta name="viewport" content="width=device-width">

اندازه‌ی مجازی

به دلیل تراکم بیشتر پیکسلی در موبایل‌های امروزی در مقایسه با تراکم متداول در نمایشگرهای لپ‌تاپ و کامپیوترهای شخصی، مرورگرهای موبایل ممکن است هر پیکسل را بزرگتر از یک پیکسل به نمایش درآورند. به این معنی که مثلا اگر عرض یک عنصر ۲۰۰ پیکسل مشخص شود، ممکن است این مقدار مساوی ۴۰۰ پیکسل به نمایش درآید.
درصد بزرگنمایی پیکسل در مرورگرهای مختلف و در دستگاه‌های مختلف و در سیستم‌عامل‌های مختلف، متغیر است. بنابراین یکی از مهم‌ترین نکات در طراحی واکنش‌گرا، عدم اعتماد به انداز‌ه‌ی پیکسل‌ها است.
در سایت Screen Sizes می‌توانید اندازه‌ی واقعی و مجازی پیکسل در ابزارهای مختلف را مشاهده کنید.
برای مثال گوشی Galaxy SII دارای ۴۸۰ پیکسل واقعی و ۳۲۰ پیکسل مجازی است. به عبارت دیگر، اگر شما یک تصویر با عرض ۳۲۰ پیکسل را در این گوشی به نمایش در بیاورید، این تصویر ۴۸۰ پیکسل فضا اشغال خواهد کرد.
بهترین راه حل برای پایداری طرح، استفاده از واحدهای فیزیکی مانند point، cm، و … است

بزرگنمایی

مرورگرهای موبایل ممکن است به صورت پیش‌فرض صفحات شما را بزرگنمایی یا کوچکنمایی کنند. از موارد قابل کنترل در تگ meta اندازه‌ی بزرگنمایی و کوچک‌نمایی است.

<meta name="viewport" content="width=480, initial-scale=1, maximum-scale=2">

در کد بالا بیشترین اندازه‌ی بزرگنمایی ۲ برابر و اندازه‌ی پیش‌فرض آن ۱ تعیین شده است.

عملکرد خاص مرورگر سافاری ممکن است باعث شود بخواهید همیشه مقدار maximum-scale را برابر ۱ قرار دهید. این مرورگر چنانچه صفحه‌ی موبایل گردانده شود تا از حالت عمودی به افقی درآید، صفحه را بار دیگر پردازش نمی‌کند و همان صفحه‌ی عمودی را بزرگنمایی می‌کند تا در عرض صفحه جای بگیرد. با تعیین مقدار maximum-scale به ۱، این عملکرد سافاری اصلاح می‌شود. البته این کار سبب می‌شود تا کاربران دیگر قادر به بزرگنمایی صفحه نباشند که خود یک اشکال به حساب می‌آید.

عرض حداقل و حداکثر

برای آنکه صفحات وب در همه‌جا به بهترین شکل ممکن نمایش داده شوند، لازم است تا عرض حداقل و حداکثر برای عنصر body تعیین شود. با توجه به جدول سایت Screen Sizes که بالاتر مشاهده کردید، حداقل عرض مجازی می‌تواند ۳۲۰ پیکسل و با توجه به آخرین آمار استفاده کنندگان لپ‌تاپ و کامپیوتر، حداکثر عرض مناسب، ۱۰۰۰ پیکسل است. البته ممکن است با توجه به تقسیم‌پذیری بهتر ۹۶۰ در مقایسه با ۱۰۰۰، بخواهید از این عدد استفاده کنید.

دید جعبه‌ای یا بر پایه‌ی ماژول

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

ویژگی‌های خاص شیوه‌نامه‌های CSS برای پیاده‌سازی طرح واکنش‌گرا

مهم‌ترین ویژگی CSS برای پشتیبانی طراحی واکنش‌گرا، دستور media است. این دستور به ما کمک می‌کند تا بر اساس عرض صفحه، ویژگی‌های عنصرهای دلخواه خود را تغییر دهیم. min-width و max-width در مقابل media ابزارهایی هستند که بسیار ما را یاری خواهند داد:

@media ( min-width: 1000px ) {
	footer {
		width: 1000px;
	}
}
@media ( min-width: 401px ) {
	footer {
		display: block;
	}
}
@media ( max-width: 400px ) {
	footer {
		display: none;
	}
}

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

تصویرها

دانستن دو نکته در مورد تصویرها الزامی است. نخست انتخاب اندازه‌ی مناسب برای تصویرها طوری که کیفیت آن‌ها در هنگام نمایش کم نشود و حجم آن‌ها هم متناسب با محدودیت‌های ارتباطی شبکه‌های موبایل باشد و نکته‌ی دوم تغییر عرض خودکار تصویر بر اساس عرض صفحه است.

بهتر است اندازه‌ی تصویر مساوی بزرگترین اندازه‌ی پیکسل‌های واقعی نمایشگر کامپیوتر در نظر گرفته شود. برای مثال عدد ۱۰۰۰ یا ۱۳۶۶ می‌تواند مقدار مناسبی باشد.

در نمایشگرهای کوچکتر، با تعیین اندازه‌ی درصدی عرض و تعیین نکردن ارتفاع یا قرار دادن مقدار auto برای آن می‌توان یک تصویر واکنش‌گرا در اختیار داشت

img#header {
	width: 100%;
	height: auto;
}

تغییر اندازه‌ی تصاویر پس‌زمینه هم در css به شکل زیر انجام می‌شود:

div#header {
	width: 100%;
	padding-top: 50%;
	background-image: url( "01.jpg" );
	background-repeat: no-repeat;
	background-size: 100% auto;
}

نکته‌ی قابل توجه در قطعه کد بالا، استفاده از padding-top برای مشخص کردن ارتفاع div است. با توجه به اینکه معیار padding عرض عنصر والد است. با کمک آن می‌توان، ارتفاع یک عنصر را به صورت Responsive تعیین کرد.

اندازه‌ی فونت‌ها

بهترین واحد برای مشخص کردن، اندازه‌ی فونت‌ها واحدهای فیزیکی هستند. برای مثال تعیین اندازه‌ی فونت پیش‌فرض صفحه با مقدار “۱۴pt” به جای “۱۴px” و تعیین اندازه‌ی عنصرهای داخلی بر اساس «درصد» یا «em» راه حلی مطمئن برای داشتن نوشته‌های واکنش‌گرا است.

آموزش طراحی سایت ریسپانسیو responsive واکنش گرا
تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
درباره نویسنده :
پشتیبانی وب یار

برچسب ها

gadget html responsive Responsive responsive webdesign userfrendly آموزش bootstrap آموزش css3 آموزش Edge Reflow آموزش html5 آموزش Responsive Web Design آموزش Responsive Web Design تصویری فیلم آموزش آسان Responsive Web Design آموزش ایج ریفالو آموزش تصویری Responsive Web Design آموزش تصویری طراحی سایت واکنش گرا آموزش تصویری فیلم ریسپانسیو وب دیزاین آموزش تصویری کار با Adobe Edge Reflow آموزش دریم ویور آموزش دریم ویور CS6 آموزش سریع Responsive Web Design آموزش سطح متوسط Responsive Web Design آموزش طراحی ریسپانسیو با ایج ریفالو آموزش طراحی ریسپانسیو با دریم ویور آموزش طراحی سایت آموزش طراحی سایت پاسخگو آموزش طراحی قالب سایت آموزش طراحی وب سایت مناسب موبایل تبلت آموزش قالب responsive آموزش کامل تصویری Responsive Web Design آموزش گام به گام Responsive Web Design بهینه سازی وب سایت تبلت دوره آموزش دریم ویور طراحی سایت طراحی سایت برای صفحه نمایش کوچک طراحی سایت مانیتور کوچک طراحی قالب وبلاگ طراحی واکنش‌گرا طراحی وب طراحی وب سایت ابعاد تبلت طراحی وب سایت ابعاد کوچک طراحی وب سایت ابعاد موبایل فیلم آموزش دریم ویور فیلم آموزشی تکنولوژی ریسپانسیو فیلم آموزشی طراحی ریسپانسیو فیلم آموزشی طراحی سایت واکنش‌گرا فیلم ویدیویی طراحی سایت ریسپانسیو فیلمهای آموزش Responsive Web Design قالب واکنش گرا قانون 12 تا در responsive گجت یوزر فرندلی

مطالب مرتبط

طراحی سایت فروشگاهی

طراحی سایت فروشگاهی میک رویال

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

نحوه ی ساخت پست تایپ سفارشی در وردپرس

نحوه ی ساخت پست تایپ سفارشی در وردپرس

نحوه ی ساخت پست تایپ سفارشی در وردپرس در طول سال های گذشته وردپرس به یک سیستم مدیریت محتوای قوی تبدیل شده است. به طور پیش فرض وردپرس دارای مجموعه ای پست تایپ می باشد. به عنوان مثال برگه ها یا نوشته ها در وردپرس نوعی پست تایپ محسوب می شوند. با این وجود شما […]

طراحی گرافیک سایت

طراحی گرافیک سایت

طراحی گرافیکی سایت: اگر همه سعی و تلاش خود را پای این موضوع که کاربران فقط به سایت شما وارد شوند بگذارید، باید بدانید که کاملا در اشتباه هستید. اگر طراحی سایت از گرافیک خوبی برخوردار نباشد و برای کاربر جذابیتی نداشته باشد کاربر به محض ورود به سایت از سایت خارج می گردد و […]

طراحی سایت فروشگاهی

طراحی سایت فروشگاهی عرضه تخمه

طراحی سایت فروشگاهی عرضه تخمه طراحی سایت اختصاصی طعم آفرین بهاران عرضه کننده انواع تخمه های کدو / هندوانه و آفتابگردان وارداتی در اصفهان  از نمونه کارهای حرفه ای طراحی سایت تیم وب یار می باشد.طراحی سایت فروشگاهی طعم آفرین بهاران برای مشتریان عزیزی که کسب و کارشان در حوزه های مختلف فروش و عرضه […]

ارسال دیدگاه

*    

*    

ارتباط با تیم پشتیبانی وب یار

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

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید