چگونه یک سایت ریسپانسیو طراحی کنیم ؟ (آموزش)
عامیانه عرض کنم
طراحی ریسپانسیو یعنی طراحی واکنش گرا یعنی شما سایتی رو طراحی می کنید که در پلتفرم های مختلف به درستی و طبق اون پلتفرم نمایش می ده مثلا یک سایت طراحی شده با استفاده از تکنیک ریسپانسیو هم در نمایشگر لپتاپ هم در تبلت و هم در موبایل استاندارد نمایش داده می شه
در طراحی ریسپانسیو می تونید از فریم ورک های مختلفی که وجود داره استفاده کنید که من در این تاپیک طریقه استفاده از lessframework رو بهتون می گم فریم ورک های دیگری مثل yaml و SimpleGrid و amazium و cssgrid و .... هم وجود داره
اولین قسمت کد فریم ورک رو در داخل یک فایل html ذخیره کنید
توضیح در مورد تکه کد بالا بده اصلی سایت که دارای یک فایل پیوست به نام html5.js که باعث عمل کردن تگ های html5 در مرورگرهایی که از html5 پشتیبانی نمی کنند می شود.کد HTML:<!doctype html> <html> <head> <meta charset="utf-8"/> <title></title> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="stylesheet" media="all" href=""/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ --> </head> <body lang="en"> </body> </html>
تگ link rel هم کد سی اس اس خودتون رو داخلش قرار بدید و آدرسش رو در این تگ قرار می دید.
تگ "meta name="viewport هم برای اینکه مرورگر بفهمونه که عرض وب سایت رو با عرض نمایشگر پلتفرم ها یکی کن. توضیحات بیشتر در مورد این تگ در این لینک
دوم این کدها رو داخل یک فایل css ذخیره کنید
کد:/* Less Framework 4 <a href="http://lessframework.com" target="_blank">http://lessframework.com</a> by Joni Korpi License: <a href="http://opensource.org/licenses/mit-license.php" target="_blank">http://opensource.org/licenses/mit-license.php</a> */ /* Resets ------ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, hgroup, menu, footer, header, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } article, aside, canvas, figure, figure img, figcaption, hgroup, footer, header, nav, section, audio, video { display: block; } a img {border: 0;} /* Typography presets ------------------ */ .gigantic { font-size: 110px; line-height: 120px; letter-spacing: -2px; } .huge, h1 { font-size: 68px; line-height: 72px; letter-spacing: -1px; } .large, h2 { font-size: 42px; line-height: 48px; } .bigger, h3 { font-size: 26px; line-height: 36px; } .big, h4 { font-size: 22px; line-height: 30px; } body { font: 16px/24px Georgia, serif; } .small, small { font-size: 13px; line-height: 18px; } /* Selection colours (easy to forget) */ ::selection {background: rgb(255,255,158);} ::-moz-selection {background: rgb(255,255,158);} img::selection {background: transparent;} img::-moz-selection {background: transparent;} body {-webkit-tap-highlight-color: rgb(255,255,158);} /* Default Layout: 992px. Gutters: 24px. Outer margins: 48px. Leftover space for scrollbars @1024px: 32px. ------------------------------------------------------------------------------- cols 1 2 3 4 5 6 7 8 9 10 px 68 160 252 344 436 528 620 712 804 896 */ body { width: 896px; padding: 72px 48px 84px; background: rgb(232,232,232); color: rgb(60,60,60); -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */ } /* Tablet Layout: 768px. Gutters: 24px. Outer margins: 28px. Inherits styles from: Default Layout. ----------------------------------------------------------------- cols 1 2 3 4 5 6 7 8 px 68 160 252 344 436 528 620 712 */ @media only screen and (min-width: 768px) and (max-width: 991px) { body { width: 712px; padding: 48px 28px 60px; } } /* Mobile Layout: 320px. Gutters: 24px. Outer margins: 34px. Inherits styles from: Default Layout. --------------------------------------------- cols 1 2 3 px 68 160 252 */ @media only screen and (max-width: 767px) { body { width: 252px; padding: 48px 34px 60px; } } /* Wide Mobile Layout: 480px. Gutters: 24px. Outer margins: 22px. Inherits styles from: Default Layout, Mobile Layout. ------------------------------------------------------------ cols 1 2 3 4 5 px 68 160 252 344 436 */ @media only screen and (min-width: 480px) and (max-width: 767px) { body { width: 436px; padding: 36px 22px 48px; } } /* Retina media query. Overrides styles for devices with a device-pixel-ratio of 2+, such as iPhone 4. ----------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { body { } }
کد css بالا از چند قسمت تشکیل شده است
قسمت پیشفرض سایت که در body دارای عرض 922px می باشد که شما سایتتنون رو به طور پیشفرض در این محیط طراحی می کنید
قسمت بعدی برای طراحی قالب در تبلت هاکد:/* Default Layout: 992px. Gutters: 24px. Outer margins: 48px. Leftover space for scrollbars @1024px: 32px. ------------------------------------------------------------------------------- cols 1 2 3 4 5 6 7 8 9 10 px 68 160 252 344 436 528 620 712 804 896 */ body { width: 922px; padding: 32px 48px 84px; background: rgb(232,232,232); color: rgb(60,60,60); -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */ margin:0 auto; margin-top:10px; }
قسمت بعدی برای موبایل ها 320pxکد:/* Tablet Layout: 768px. Gutters: 24px. Outer margins: 28px. Inherits styles from: Default Layout. ----------------------------------------------------------------- cols 1 2 3 4 5 6 7 8 px 68 160 252 344 436 528 620 712 */ @media only screen and (min-width: 768px) and (max-width: 991px) { body { width: 712px; padding: 48px 28px 60px; } #image{ width:700px; } }
قسمت بعدی برای موبایل های 480pxکد:@media only screen and (max-width: 767px) { body { width: 252px; padding: 48px 34px 60px; } }
و قسمت آخر برای نماشگر های رتینا و آیفون می باشد که بسته به نیازتون در این قسمت طراحی می کنیدکد:/* Wide Mobile Layout: 480px. Gutters: 24px. Outer margins: 22px. Inherits styles from: Default Layout, Mobile Layout. ------------------------------------------------------------ cols 1 2 3 4 5 px 68 160 252 344 436 */ @media only screen and (min-width: 480px) and (max-width: 767px) { body { width: 436px; padding: 36px 22px 48px; } }
خوب شما الان بدنه اصلی lessframework رو که از سایت lessframework.com گرفته بودم رو نصب کردیدکد:/* Retina media query. Overrides styles for devices with a device-pixel-ratio of 2+, such as iPhone 4. ----------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { body { } }
یه مثال کوچیک از طراحی ریسپانسیو می زنم متوجه می شید
من میام در قسمت body سایت با تگ h1 یک عنوان می زنم و می رم در محیط پیشفرض css خودم تگ h1 رو به صورت زیر اندزه می دم
کد:
خوب در محیط پیشفرض این به صورت عادی نماش داده می شه حالا می خوام وقتی محیط مرورگرم رو کوچیک تر کردم فونت تگ h1 هم کوچیک تر بشه برای اینکار می رم در قسمت های دیگه همین کدی که در بالا اومده رو در محیط های دیگه css خودم با فونت کوچیک تر می نویسم
شکل اصلی می شه این :
html
cssکد HTML:<h1>وب سایت ریسپانسیو </h1>
/* Default Layout: 992px. Gutters: 24px. Outer margins: 48px. Leftover space for scrollbars @1024px: 32px. ------------------------------------------------------------------------------- cols 1 2 3 4 5 6 7 8 9 10 px 68 160 252 344 436 528 620 712 804 896 */ body { width: 896px; padding: 72px 48px 84px; background: rgb(232,232,232); color: rgb(60,60,60); -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */ } h1{ font-size:30px; } /* Tablet Layout: 768px. Gutters: 24px. Outer margins: 28px. Inherits styles from: Default Layout. ----------------------------------------------------------------- cols 1 2 3 4 5 6 7 8 px 68 160 252 344 436 528 620 712 */ @media only screen and (min-width: 768px) and (max-width: 991px) { body { width: 712px; padding: 48px 28px 60px; } h1{ font-size:20px; } } /* Mobile Layout: 320px. Gutters: 24px. Outer margins: 34px. Inherits styles from: Default Layout. --------------------------------------------- cols 1 2 3 px 68 160 252 */ @media only screen and (max-width: 767px) { body { width: 252px; padding: 48px 34px 60px; } h1{ font-size:15px; } } /* Wide Mobile Layout: 480px. Gutters: 24px. Outer margins: 22px. Inherits styles from: Default Layout, Mobile Layout. ------------------------------------------------------------ cols 1 2 3 4 5 px 68 160 252 344 436 */ @media only screen and (min-width: 480px) and (max-width: 767px) { body { width: 436px; padding: 36px 22px 48px; } h1{ font-size:20px; } } /* Retina media query. Overrides styles for devices with a device-pixel-ratio of 2+, such as iPhone 4. ----------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { body { } h1{ font-size:10px; } }
خوب شما الان محیط مروگر از بغل کوچیکتر کنید می بینید که متن هم به همرا اون کوچیک می شه
امیدوارم متوجه شده باشید و از طراحی مدرن و زیبا لذت ببرید
نکته : قالب اصلی lessframework که در ابتدا قرار دادم بهم نریزید.
________________________
منبع : برنامه نویس
پاسخ با نقل قول