ورود

View Full Version : چرا ریسپانسیو تو اینجا کار نمکنه


jamejam123
جمعه 15 فروردین 1393, 15:56 عصر
سلام
به این کد من یه نگا بندازید.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>responsiv</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
ul{
margin:auto;
max-width:900px;
margin-top:40px;
width:100%;
background:#FC0;
height:36px;
border-radius:3px;
}
ul li{
float:right;
list-style:none;
height:22px;
background:#F90;
margin:3px;
padding:5px;
max-width:160px;
width:100%;
text-align:right;
}
</style>
</head>
<body>

<ul>
<li>اول</li>
<li>دوم</li>
<li>سوم</li>
<li>چهارم</li>
<li>پنجم</li>
</ul>

</body>
</html>




حالا به این تصویر یه نگا بندازید.
http://s5.picofile.com/file/8118918326/sadsad.png
تو اینجا وقتی من صفحه رو کوچیک میکنم
چرا به جای اینکه اندازه li کوچک شود . li ها به زیر همدیگر میروند.
چگونه می توانم این مشکل رو حل کنم
ممنون
p30online
جمعه 15 فروردین 1393, 19:14 عصر
باید این کدها را برای صفحات مختلف بنویسید! باید بین این دستور هم بنویسید
مثلا این 480 است


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

//کدهای مورد نظر برای صفحه نمایش 480 پیکسل
}
jamejam123
جمعه 15 فروردین 1393, 21:50 عصر
به این کد یه نگا بندازید



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>responsiv</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#one{
max-width:1000px;
width:100%;
background:#FC0;
padding:6px;
margin:auto;
}
</style>
</head>
<body>

<div id="one">

انفجار نهایی یک ستارهٔ سنگین را ابرنواختر می‌نامند ولی خورشید ما هیچ‌گاه انفجاری این‌چنین را تجربه نخواهد کرد چرا که کمترین جرم مورد نیاز برای رخداد یک ابرنواختر، هشت برابر جرم خورشید ما است.[۱۲] از نظر شیمیایی سه-چهارم جرم خورشید را هیدروژن و باقی‌ماندهٔ آن را بیشتر هلیم می‌سازد. پس از هیدروژن و هلیم، عنصرهای سنگین از سازندگان دیگر خورشید اند که عبارتند از: اکسیژن، کربن، نئون و آهن و... این عنصرها، سازندهٔ ۱٫۶۹٪ از جرم خورشید اند که خود این مقدار ۵٬۶۲۸ برابر جرم زمین است.[۱۳]

خورشید در رده‌بندی ستارگان بر پایهٔ رده بندی طیفی، در دستهٔ G27 جای دارد و به صورت غیر رسمی با نام کوتولهٔ زرد از آن یاد می‌شود چون پرتوهای پیدای آن در طیف زرد-سبز شدیدتر است. هر چند که رنگ آن از سطح زمین، سفید باید دیده شود ولی چون پراکندگی نور آبی در جو وجود دارد، به رنگ زرد دیده می‌شود (پراکندگی رایلی).[۱۴][۱۵] همچنین در برچسب رده‌بندی طیفی، G2، گفته شده که دمای سطح خورشید نزدیک به ۵۷۷۸ کلوین (۵۵۰۵ سانتیگراد) است و در V گفته شده‌است که خورشید مانند بیشتر ستارگان، یک ستارهٔ رشتهٔ اصلی است و درنتیجه انرژی خود را از راه همجوشی هسته‌ای هسته ی هیدروژن به هلیم فراهم می‌کند و در هر ثانیه، در هستهٔ خود، ۶۲۰ میلیون تُن هیدروژن را دچار همجوشی می‌کند. در دوره‌ای کیهان شناسان می‌گفتند که خورشید نسبت به دیگر ستارگان، ستاره‌ای کوچک و ناچیز است ولی امروزه بر این باور اند که خورشید از ۸۵٪ ستارگان کهکشان راه شیری درخشان تر است. چون بیشتر آن‌ها کوتوله‌های سرخ اند.[۱۶][۱۷] بزرگی قدر مطلق خورشید ۴٫۸۳+ است البته چون خورشید نزدیک ترین ستاره به زمین است، برای آن، خورشید درخشان ترین جرم در آسمان دانسته می‌شود و قدر ظاهری آن ۲۶٫۷۴- است.[۱۸][۱۹] تاج خورشیدی پیوسته در حال پراکندن بادهای خورشیدی در فضا است. این بادها، جریان‌هایی از ذره‌های باردار اند که تا فاصله‌ای نزدیک به ۱۰۰ واحد نجومی توان دارند. حباب‌های ساخته شده در محیط میان‌ستاره‌ای که در اثر بادهای خورشیدی ساخته شده‌اند، بزرگترین سازهٔ پیوستهٔ پدید آمده در منظومهٔ خورشیدی اند

</div>

</body>
</html>



تو اینجا میبینید که با کوچک کردن اندازه مرورگر به طور اتومات اندازه دایو هم کم میشود.
ولی تو کد اولی اندازه li ها کم نمیشود بلکه به زیر هم میروند.
نمیشود کار کرد که با کم کردن اندازه مرورگر اندازه li ها کم شود و به زیر هم نرورد
بی نهایت ممنون
jamejam123
جمعه 15 فروردین 1393, 22:17 عصر
به این کد ها یه نگا بندازید
آیا باید حتما به این روش عمل کنم
راه ساده تری برای آن وجود ندازد
بی نهایت ممنون


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>responsiv</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
ul{
margin:auto;
max-width:900px;
margin-top:40px;
width:100%;
background:#FC0;
height:36px;
border-radius:3px;
}
ul li{
float:right;
list-style:none;
height:22px;
background:#F90;
margin:3px;
padding:5px;
max-width:160px;
width:100%;
text-align:right;
}



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

ul li{
display:inline-table;
list-style:none;
height:22px;
background:#F90;
margin:3px;
padding:5px;
max-width:143px;
width:100%;
text-align:right;
}

}

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

ul li{
display:inline-table;
list-style:none;
height:22px;
background:#666;
margin:3px;
padding:5px;
max-width:134px;
width:100%;
text-align:right;
}
}


@media only screen and (max-width:750px){
ul li{
display:inline-table;
list-style:none;
height:22px;
background:#6C0;
margin:3px;
padding:5px;
max-width:125px;
width:100%;
text-align:right;
}
}

@media only screen and (max-width:700px){
ul li{
display:inline-table;
list-style:none;
height:22px;
background:#F96;
margin:3px;
padding:5px;
max-width:114px;
width:100%;
text-align:right;
}
}

@media only screen and (max-width:650px){
ul li{
display:inline-table;
list-style:none;
height:22px;
background:#3CC;
margin:3px;
padding:5px;
max-width:105px;
width:100%;
text-align:right;
}
}

@media only screen and (max-width:600px){
ul li{
display:inline-table;
list-style:none;
height:22px;
background:#9F9;
margin:3px;
padding:5px;
max-width:96px;
width:100%;
text-align:right;
}
}





</style>
</head>
<body>


<ul>
<li>اول</li>
<li>دوم</li>
<li>سوم</li>
<li>چهارم</li>
<li>پنجم</li>
</ul>






</body>
</html>
p30online
جمعه 15 فروردین 1393, 22:56 عصر
تا آنجایی که من اطلاع دارم برای واکنش گرا کردن از این طریق طراحی می کنند!
jamejam123
جمعه 15 فروردین 1393, 23:10 عصر
بی نهایت ممنون
بهزاد علی محمدزاده
جمعه 15 فروردین 1393, 23:52 عصر
سلام . معمولا در هر کاری یه مرحله یادگیری مقدماتی و پایه ایی هست و یه مرحله هم کسب و تجربه و کار عملی و ... شما از آخر داری به اول میای ! اول شروع می کنی به کار بعد میری مباحث پایه رو یادمیگری ؟ یه توصیه دوستانه و برادرانه : وقتی می خوای یه زبان یا تکنولوژی رو یادبگیری , تجربه ناچیز من میگه که قبلش مدتی رو وقت بذار و منابع خوب و شناسایی کن . بعد این منابع که کتاب و فیلم و مقاله و نمونه کد و هرچه که هست و ببین و بخون . تمرین کن و بعد کار . اینجوری حداقل یه اطلاعات اولیه بدست میاری که باعث میشه بتونی کار و خوب شروع کنی . چه عجله ایی برای پروژه انجام دادن داری ؟ زن و بچه ات گرسنه ان ؟

کد هات همه اش اشتباهه . اندازه هات اشتباهه . یعنی media queries ها . و هیچ کس هم نمی تونه برات توضیح بده چون شرح دادنش یعنی آموزش دادنش. طراحی ریسپانسیو خیلی هم کار راحتی نیست .
برای شروع این آموزش (https://tutsplus.com/course/responsive-web-design-techniques/)و پیدا کن و ببین .
jamejam123
شنبه 16 فروردین 1393, 23:26 عصر
سلام دوست عزیز
دوست عزیز من بیس کار رو بلدم نه به اون حدی که حرفه ای باشه
دارم تو پروژه ها کار میکنم تا تجربه کسب کنم
به این سایت برو
azarsang.com
اینو من دو ماهی میشه طراحی کردم و به نظر خودم ریسپانسیو هستش
ولی الآن یه سایت دیگه طراحی میکردم که به مشکل خوردم
حالا خواستم ببینم ریسپانسیو دقیقا چه طور عمل میکنه
فقط همین
بی نهایت ممنون