چگونه یک سایت ریسپانسیو طراحی کنیم ؟ (آموزش)
عامیانه عرض کنم
طراحی ریسپانسیو یعنی طراحی واکنش گرا یعنی شما سایتی رو طراحی می کنید که در پلتفرم های مختلف به درستی و طبق اون پلتفرم نمایش می ده مثلا یک سایت طراحی شده با استفاده از تکنیک ریسپانسیو هم در نمایشگر لپتاپ هم در تبلت و هم در موبایل استاندارد نمایش داده می شه
در طراحی ریسپانسیو می تونید از فریم ورک های مختلفی که وجود داره استفاده کنید که من در این تاپیک طریقه استفاده از lessframework رو بهتون می گم فریم ورک های دیگری مثل yaml و SimpleGrid و amazium و cssgrid و .... هم وجود داره
اولین قسمت کد فریم ورک رو در داخل یک فایل html ذخیره کنید
کد 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>
توضیح در مورد تکه کد بالا بده اصلی سایت که دارای یک فایل پیوست به نام html5.js که باعث عمل کردن تگ های html5 در مرورگرهایی که از html5 پشتیبانی نمی کنند می شود.
تگ 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;
}
قسمت بعدی برای طراحی قالب در تبلت ها
کد:
/* 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;
}
}
قسمت بعدی برای موبایل ها 320px
کد:
@media only screen and (max-width: 767px) {
body {
width: 252px;
padding: 48px 34px 60px;
}
}
قسمت بعدی برای موبایل های 480px
کد:
/* 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 {
}
}
خوب شما الان بدنه اصلی lessframework رو که از سایت lessframework.com گرفته بودم رو نصب کردید
یه مثال کوچیک از طراحی ریسپانسیو می زنم متوجه می شید
من میام در قسمت body سایت با تگ h1 یک عنوان می زنم و می رم در محیط پیشفرض css خودم تگ h1 رو به صورت زیر اندزه می دم
خوب در محیط پیشفرض این به صورت عادی نماش داده می شه حالا می خوام وقتی محیط مرورگرم رو کوچیک تر کردم فونت تگ h1 هم کوچیک تر بشه برای اینکار می رم در قسمت های دیگه همین کدی که در بالا اومده رو در محیط های دیگه css خودم با فونت کوچیک تر می نویسم
شکل اصلی می شه این :
html
کد HTML:
<h1>وب سایت ریسپانسیو </h1>
css
کد:
/* 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 که در ابتدا قرار دادم بهم نریزید.
________________________
منبع : برنامه نویس
