درست ریسپانسیو شده؟

[bftarane]

سلام.
لطفاً صفحه زیر رو ببینید.
http://generalsite.ir/responsivetrain.aspx
اون باکس هایی که Border مشکی دارن رو لطفاً ببینید درست ریسپانسیو شدن؟
در عرض و ارتفاع تغییری ندادم. فقط اومدم float رو none گذاشتم یعنی:
@media screen and (max-width: 650px) {float:none;}
قراره تو این باکسها یه عکس تبلیغی قرار بگیره و با hover روی باکس یه سری نوشته دیده بشه بنابراین فکر کردم اگه بخوان کوچیک بشن باکسا کار درستی نباشه.:متفکر:

[qartalonline]

تقریبا خوبه. ولی یه سری اشکالاتی داره که میگیم:
1. از نظر کدنویسی اشکالات زیادی دارید. لینک (http://validator.w3.org/check?uri=generalsite.ir/responsivetrain.aspx)
2. وقتی که انداره صفحه از 650 کمتر میشه باکسهای تصاویر باید در عرض صفحه پخش بشن که این اتفاق نمیافته و باکسها فقط سمت چپ قرار میگیرند و بقیه صفحه خالیه!
اشکالات دیگه هم وجود داره که فعلا چون طرح بصورت آزمایشی هستش به چشم نمیاد از جمله قسمت هدر و ستون کناری .

[bftarane]

مرسی.

سوال من اینجا فقط در مورد ریسپانسیوه


اشکالات دیگه هم وجود داره که فعلا چون طرح بصورت آزمایشی هستش به چشم نمیاد از جمله قسمت هدر و ستون کناری . من از لینک زیر استفاده کردم برای ایجاد این صفحه
فقط باکسهای وسط رو اضافه کردم قسمتهای دیگه تغییر زیادی ندادم فقط رنگها برای راحت تر شدن کار و یه سری اضافات رو پاک کردم. ولی ممنون میشم منظورتون رو از اشکالات هدر و ستون کناری بگین. از نظر گرافیکی هیچ کاری انجام نشده بنابراین منظورم ایرادات گرافیکی نیست اگه از نظر ریسپانسیو بودن و ... مشکل داره بگین.
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries


من الآن با این سایت تست کردم http://mattkersley.com/responsive/
این عکسشه
110285

اینجا فقط سایزهای
1024
768
480
320
240
رو بررسی کرده
و صفحه رو که تست کردم در همه سایزها به نظرم بدون ایراد بود
فقط در 480
فکر کنم باید به جای 1 باکس 2 تا کنار هم قرار بگیرن. درسته؟
چرا 650 اینجا نداره؟

[bftarane]

خوب این استایل دیو اولیه هستش
.folio1 {
width: 160px;
height: 160px;
margin: 10px;
float: left;
border: 10px solid #000;
overflow: hidden;
position: relative;
text-align: center;

}
با توجه به اینکه من نمی خوام عرض دیو رو کم کنم چه تغییراتی بدم تا یه ستونه دیده نشن باکسها؟

اینم استایل اولیه Container یعنی اون قسمت که به رنگ خاکی هست.
#content {
background: khaki;
margin: 30px 0 30px;
padding: 20px 35px;
width: 600px;
float: left;



}

[qartalonline]

شما باید در کلاس folio1 خاصیت float: left; قرار بدید.

و کد زیر رو بعد از آخرین باکس تصویر قرار بدید:

<div style="clear: both;"></div>

[bftarane]

کد نهایی به این صورت شد
.folio1 {
width: 160px;
height: 160px;

margin-right: 1px;
margin-left:1px;
float: left;
border: 10px solid #000;
overflow: hidden;
position: relative;
text-align: center;

}
یعنی تنها تغییری که دادم کم کردن margin بود
الآن با این سایت تست کردم از نتیجه راضی بودم http://responsivetest.net
البته فکر کنم هنوز باید بیشتر کار کنم مثلاً اینکه دیوها بیان دقیقاً وسط قرار بگیرن و این جور تمیزکاری ها
پس در کل منطق کار همینه دیگه درسته؟ یعنی باید در عرضهای مختلف تست کنیم و حالا با کم و زیاد کردن مارجین و عرض و ... با Device مورد نظر صفحه رو تطبیق بدیم. درسته؟

[qartalonline]

بله منطق کار درسته.
معمولا اگه اندازه ها رو به درصد بدید بهتره و نیازی نیست برای هر عرض اندازه خاصی بذارید اینطوری فقط یه سری تغییرات جزی میمونه مثل float و .. .

[refugee]

سلام من ریسپانسیو کار نکردم , یه سوال در مورد عکس ها داشتم , چطور میشه تو ریسپانسیو کردن عکس ها رو هم تنظیم کرد ؟

بطور مثال این ادرس : http://womanshooter.blogfa.com

من اینو قبلا طراحی کرده بودم , الان که تست کردم با همین ادرسی که خانم دادن , دیدم اصلا ریسپانسیو نیست ( البته من ریسپانسیو نکرده بودم ) الان اگر همچین قالبی را بخواهیم ریسپانسیو کنیم , عکسش چطور ست بشه با اون اندازه عکس روی گوشی و تبلت و ... ؟

[bftarane]

سلام من ریسپانسیو کار نکردم , یه سوال در مورد عکس ها داشتم , چطور میشه تو ریسپانسیو کردن عکس ها رو هم تنظیم کرد ؟


سلام.
در پست 3 یه لینک گذاشتم که آموزش داده ریسپانسیو رو
اونجا گفته
Flexible Images

To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.

img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
فکر کنم همین کافی باشه.

[qartalonline]

نمونه قالب طراحی شده بصورت ریسپانسیو (http://www.aysuweb.com/) میتونید از کدهاش استفاده کنید.

[refugee]

سلام.
در پست 3 یه لینک گذاشتم که آموزش داده ریسپانسیو رو
اونجا گفته
Flexible Images

To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.

img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
فکر کنم همین کافی باشه.

یعنی عکس کوچیک میشه ؟ به اندازه خود صفحه مثلا موبایل ؟ max-width:100%

[mehbod.rayaneh]

سلام
1 سری شرط باید بذارید!
روی bootstrap بیشتر مطالعه کنید و سعی کنید همه کدها را با دقت بررسی کنید!
مثلا از شرطها استفاده نکردید!
الان توی 1 تاپیک دیگه (http://barnamenevis.org/showthread.php?418549-responsive-%DA%A9%D8%B1%D8%AF%D9%86) هم گفتم! :D همونو بخونید
موفق باشید.