حمید . ه
پنج شنبه 28 فروردین 1393, 18:24 عصر
به این کد های من یه نگا بندازید.
من تازه شروع کردم ریسپانسیو کردن رو یاد بگیرم.
خیلی ها بهم گفتن برو دنبال فریم ورک ها ولی ایتدا میخوام روش دستی رو یاد بگیرم.
به این کد های من یه نگا بندازید.
به نظرتون ریسپانسیو شده هستش.
آلان تو گرید بندی باید ساختار کد های html من عوض شه یا تو css تو مدیا کوئری ها چیزی بنویسم.
گرید بندی مگه تنها واسه فتوشاپ نیست!!!
به جای گرید بندی چه چیزایی رو تو ریسپانسیو رعایت میکنن؟
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
nav{
margin:auto;
max-width:900px;
width:100%;
height:35px;
background:#FC0;
border-radius:0px 0px 3px 3px;
}
nav ul{
margin:0px;
padding:0px;
width:100%;
list-style:none;
}
nav ul li a:link,nav ul li a:visited{
float:right;
background:#FF9;
padding:4px;
margin-top:3px;
border-radius:4px;
color:#600;
max-width:60px;
text-align:right;
font-size:15px;
width:100%;
text-decoration:none;
margin-right:3px;
margin-left:3px;
}
header{
margin:auto;
width:100%;
max-width:900px;
background:#F96;
height:80px;
padding-top:30px;
}
h1{
margin:0px;
padding:0px;
text-align:center;
}
h3{
margin:0px;
padding:0px;
text-align:center;
}
#all{
margin:auto;
width:100%;
max-width:900px;
text-align:right;
background:#FCF;
}
footer{
margin:auto;
background:#333;
width:100%;
max-width:900px;
color:#FFF;
text-align:center;
padding:0px;
}
@media only screen and (min-width:600px) and (max-width:750px){
}
@media only screen and (min-width:450px) and (max-width:599px){
nav{
margin:auto;
max-width:900px;
width:100%;
height:70px;
background:#FC0;
border-radius:0px 0px 3px 3px;
}
nav ul{
margin:0px;
padding:0px;
width:100%;
list-style:none;
}
nav ul li a:link,nav ul li a:visited{
float:right;
background:#FF9;
padding:4px;
margin-top:3px;
border-radius:4px;
color:#600;
max-width:60px;
text-align:right;
font-size:15px;
width:100%;
text-decoration:none;
margin-right:3px;
margin-left:3px;
}
}
@media only screen and (min-width:370px) and (max-width:449px){
nav{
margin:auto;
max-width:900px;
width:100%;
height:70px;
background:#FC0;
border-radius:0px 0px 3px 3px;
}
nav ul{
margin:0px;
padding:0px;
width:100%;
list-style:none;
}
nav ul li a:link,nav ul li a:visited{
float:right;
background:#FF9;
padding:4px;
margin-top:3px;
border-radius:4px;
color:#600;
max-width:60px;
text-align:right;
font-size:15px;
width:100%;
text-decoration:none;
margin-right:3px;
margin-left:3px;
}
}
@media only screen and (min-width:200px) and (max-width:369px){
h1{
font-size:26px;
}
h3{
font-size:19px;
}
#all{
background:#9FC;
}
nav{
margin:auto;
max-width:900px;
width:100%;
height:230px;
background:#FC0;
border-radius:0px 0px 3px 3px;
}
nav ul{
margin:0px;
padding:0px;
width:100%;
list-style:none;
}
nav ul li a:link,nav ul li a:visited{
float:right;
background:#FF9;
padding:4px;
margin-top:3px;
border-radius:4px;
color:#600;
max-width:360px;
text-align:center;
font-size:15px;
width:100%;
text-decoration:none;
margin-right:3px;
margin-left:3px;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li> <a href="#"> خانه </a> </li>
<li> <a href="#">گالری </a> </li>
<li> <a href="#">درباره ما </a> </li>
<li> <a href="#">تماس با ما </a> </li>
<li> <a href="#"> خانه </a> </li>
<li> <a href="#">گالری </a> </li>
<li> <a href="#">درباره ما </a> </li>
<li> <a href="#">تماس با ما </a> </li>
</ul>
</nav>
<header>
<h1>
اینجا هدر سایت هستش
</h1>
<h3>این سایت ریسپانسیو هستش</h3>
</header>
<div id="all">
آرایه دوبعدی دارای چند سطر و چند ستون می باشد. اولین بعد آرایه بیانگر سطرها و دومین بعد آن بیانگر ستونهاست. همانطور که از شکل بالا پیداست به ترتیب از اولین سطر شروع کرده و تا انتهای ستونهای آن سطر را اندیس گذاری کرده و سپس به سطر بعد رفته و به اندیس گذاری تا آخرین ستون سطر مربوطه می پردازیم و این عمل را تا انتها برای اندیس گذاری تکرار می کنیم. سمت راست شکل هم کاملا گویاست که عناصر آرایه به چه ترتیبی در حافظه کامپیوتر قرار می گیرند. در ادامه به نحوه تعریف این نوع از آرایه و بحث پیرامون آن می پردازیم .
برنامه C++ بالا با استفاده از توابع و ارسال آرایه بعنوان پارامتر تابع، کوچکترین عدد آرایه را به ما نشان می دهد. برای این کار لازم است ابتدا عناصر آرایه را با یک دستور حلقه تکرار for مقدار دهی کنیم و سپس اولین عنصر را برابر با minNum بگیریم. سپس با یک حلقه for دیگر آنرا با دیگر عناصر آرایه مقایسه می کنیم، اگر مقداری کمتر از آن باشد در متغیر minNum ریخته می شود و اگر نباشد پس خود اولین عنصر از همه کوچکتر است. در دستور حلقه تکرار for دوم به این دلیل count را از 1 شروع کردیم چون در بالا عنصر با اندیس صفرم آرایه را به عنوان کوچکترین عنصر در نظر گرفتیم و دیگر احتیاجی نیست آنرا دوباره با خودش مقایسه نماییم. عبارت const که در جلوی متغیر k آمده است به کامپایلر می گوید که مقدار این متغیر ثابت است و در طول برنامه تغییری نمی کند و نوشتن هر دستوری مبنی بر تغییر مقدار آن باعث بروز خطا در برنامه خواهد شد .
</div>
<footer>
اینجام فوتر سایته
</footer>
</body>
</html>
ببینید به نظر من شما مفهوم رسپانسیو دیزاین رو متوجه نشدید.
به طور خیلی ساده شما با استفاده از مدیاکوئری ها به مرورگر اعلام میکنید که در سایز x المنت y این استایل رو داشته باشه همین. دیگه این بستگی به شما داره که سایتتون رو در ابعاد استاندارد مختلف چک کنید و هرکجا که سایتتون نیاز به ویرایش داشت در همون سایز از مدیا کوئری ها استفاده کنید. درواقع مدیاها یک نوع نقطه شکست "Break point" هستند.
ضمنا گرید بندی یک مفهومه و فقط در فتوشاپ کاربرد نداره. گرید بندی در طراحی چاپی، تایپوگرافی،طراحی تمپلیت سایت و .....
درواقع گرید بندی یعنی مشخص کردن ساختار و نحوه چیدمان المنت ها. حالا در هر کجا که بود فتوشاپ یا سایت.
نمیدونم تونستم منظور رو برسونم یا نه ولی پیشنهاد میکنم حتما در مورد طراحی رسپانسیو در اینترنت جست و جو کنید. (منابع انگلیسی ترجیحا)