معنی ریسپانسیو !

[tbzgood]

سلام . من قالبی ساختم که ریسپانسیوه و تو ویندوز که با تغییر اندازه مرورگر سایت خوب تغییر میکنه اما ...
اما همین رو تو موبایل باز میکنم و کل سایت تو موبایل خوب و اندازه باز میشه اما سوال اینجاس :
من تو کد css دادم اگه اندازه کمتر از 700px بشه مثلا footer که در حالت عادی یک row و تو یک خط هست بشه 2تا قسمت که یکی زیر اونیکیه حالا :
این کار تو ویندوز عملی میشه اما چرا تو موبایل نمیشه ؟! مگه اندازه موبایل کمتر از 700 نیس پس چرا فوترها زیر هم نمیرن !؟
اینم شکلا :
این شکل اصلی : (که تو گوشی هم اینطور نشون میده)
142762
اینم شکل رسپانسیو ویندوز (که باید تو گوشی اینطور نشون بده اما نمیده !)
142761
ریسپانیسو بوت استرپ هست و دستور تو css همون media هست . مشکل کجاس

[ravand]

من نمیدونم چکار کردی؟ ولی معنی ریسپانسیو یعنی واکنش گرا. که بعضیا با یکسان بودن سایت در همه ی نمایشگر ها اشتباه میگیرن. و فکر میکنن ریسپانسیو یعنی قالب در همه ی نمایشگر ها یکسان نمایش بده که این اشتباه است.

[tbzgood]

خلاصه و اصل سوال اینه : بالا 2تا عکس هست حال توی موبایل سایت من باید مثل اولی نشون داده بشه یا مثل دومی ؟
این عکسا تویویندوز هستن که با کوچیک کردن مرورگر عکس دوم بدست میاد . حال تو گوشی شکل اولی نشون داده میشه آیا سایت من رسپانسیو هست ؟! یا باید تو گوشی مثل شکل دومی نمایش داده شه ؟
:متفکر::متفکر::متفکر:

[ravand]

اولین عکس یعنی اون عکس بالایی توی نسخه ی مبایل انگار درست نشون داده نمیشه. میتونی برای مبایل یه عکس جداگانه بذاری. من برخی مواقع که مجبور بشم این کار رو میکنم.
بهتره بری یه قالب ریسپانسیو رو پیدا کنی و توی فایرفاکس باز کنی و دکمه های ctrl shift m را بزن.

[tbzgood]

آقا حلله . رفتم این افزونه کرومو زدم باهاش میشه سایتت رو تو گوشی های مختلف امتحان کنی . امتحان کردم درسته
افزونه : Responsive Website Tester for Google Chrome™!

[ravand]

آقا حلله . رفتم این افزونه کرومو زدم باهاش میشه سایتت رو تو گوشی های مختلف امتحان کنی . امتحان کردم درسته
افزونه : Responsive Website Tester for Google Chrome™!

اصلا نیازی به این افزونه نیست! شما دکمه ی F12 را بزن بعد دکمه های ctrl shift m را با هم بگیر.

[tbzgood]

اصلا نیازی به این افزونه نیست! شما دکمه ی F12 را بزن بعد دکمه های ctrl shift m را با هم بگیر.

ممنون . اینم یاد گرفتم
اما فرق داره . الان تست کردم . توی افزونه وقتی سایتو میذارم مثل شکل دومی(یعنی زیر همیدیگه) میاد و همونه که من میخوام
اما توی f12 و cntrl + shift + m اینطور نمیشه و مثل شکل اول میشه یعنی اونی که من نمیخوام !
حالا باز همون سوال پیش میاد : سایت من توی گوشی باید مثل شکل اول باشه یا مثل شکل دوم ؟!

[tbzgood]

یکی اینو جواب بده واقعا راحته ! فقط میخوام بدونم تو گوشی موبایل سایت ریسپانسیو مثل شکل اول هست یا دوم

[Moien Tajik]

شکل دوم Responsive درست در موبایل هستش .

[tbzgood]

شکل دوم Responsive درست در موبایل هستش .

خوب تو گوشی من زدم مثل شکل اول نشون داد . اما تو افزونه گوگل کروم که شکل موبایل میاره و سایت رو اونجا باز میکنه مثل شکل دوم آورد . حالا من از کجا بدونم قالبم درست ریسپانسیو شده یا نه . از طرفی تو نت و سرور نیست و فقط یک پروژه ساده هست .
از کجا بدونم درست تو گوشی جواب میده یا نه ؟

[Moien Tajik]

روی یک هاست رایگان آپلود کنیدش و چک کنیدش که به چه صورت هست.
برای Responsive کردن میتونید از Bootstrap , Materialize , ... استفاده کنید که با چند Class به راحتی میتونید سایت Responsive بسازید .

[hamid-poorhashemi]

سلام برای چک کردن ریسپانسیو باید تو گوشی چک بشه و ممکنه تو inspect یا افزونه ها خلاف اون چیزی باشه که تو گوشی هست ... اما شما وقتی از bootstrap داری استفاده میکینی از grid بندی خود bootstrap استفاده کن نه از ز @media تا دچار این نداخل ها نشی . این رو شنیدم اما مطمئن نیستم که وقتی از بوت استرپ استفاده میکنی و بعد با css ریسپانسیو کنی bootstrap اجازه میده css ریسپانسیو بودن رو انجام بده ... خیلی مودب هستش





طراحی و برنامه نویسی سایت
romakweb.com





رماک وب (http://romakweb.com/)

[tbzgood]

من با bootstrap و class هاش(colها و contarinerها) و خود @media تو css ریسپانسیو کردم ! اما شما میگید از css media استفاده نکن پس چطور بگم تو سایز فلان چه دستوری روی المنت ها اعمال بشه !!!!!!!! الان سایت من ریسپانسیو هست توی افزونه گوگل هم درست نشون میده .
در مورد هاست رایگان هم نمیشه چون چندبار خواستم اینکارو کنم نشد ! بلد نیستم :گریه:
ممنون بهرحال . فککنم درسته . درست هم نبود مشکلی نیست عد از طراحی قالب هم میشه ریسپ کرد

[tbzgood]

فقط یه سوال من بوت استرپ خوب بلدم . بهترین روش ریسپانسیو چیه ؟! اونو برم یاد بگیرم

[marasiali]

منم بار اول که خواستم قالب ریسپانسیو بنویسم این مشکلو داشتم این تگ اضافه که به تگ های متات ردیف میشه.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

[Moien Tajik]

من با bootstrap و class هاش(colها و contarinerها) و خود @media تو css ریسپانسیو کردم ! اما شما میگید از css media استفاده نکن پس چطور بگم تو سایز فلان چه دستوری روی المنت ها اعمال بشه !!!!!!!! الان سایت من ریسپانسیو هست توی افزونه گوگل هم درست نشون میده .
در مورد هاست رایگان هم نمیشه چون چندبار خواستم اینکارو کنم نشد ! بلد نیستم :گریه:
ممنون بهرحال . فککنم درسته . درست هم نبود مشکلی نیست عد از طراحی قالب هم میشه ریسپ کرد

برای این میگیم از Bootstrap استفاده کن که دیگه نیاز به استفاده از Media و درگیر شدن با اون نباشه !
سیستم Bootstrap به این شکل هست که وقتی شما از کلاس هاش استفاده میکنید خودش Automatic براتون Responsive میکنه .
وقتی شما یک Row درست میکنید و داخلش Col تعریف میکنید که از 1 تا 12 هستش بهش میگید توی صفحه از چندتاش استفاده کنه . حالا این اندازه رو خودش توی Mobile , Tablet , PC و ... میسنجه و براتون Responsive میکنه .


فقط یه سوال من بوت استرپ خوب بلدم . بهترین روش ریسپانسیو چیه ؟! اونو برم یاد بگیرم

شما وقتی یکی از این فریمورک هارو بلد باشی بقیه رو هم راحت یاد میگیری چون بیشتر تو اسم فرق دارن !
روش بهترینی وجود نداره ولی استفاده از فریمورک ها راحتتر هستش و این اطمینان رو بهتون میده که Responsive شما با % بالایی درست هستش.

[tbzgood]

برای این میگیم از Bootstrap استفاده کن که دیگه نیاز به استفاده از Media و درگیر شدن با اون نباشه !
سیستم Bootstrap به این شکل هست که وقتی شما از کلاس هاش استفاده میکنید خودش Automatic براتون Responsive میکنه .
وقتی شما یک Row درست میکنید و داخلش Col تعریف میکنید که از 1 تا 12 هستش بهش میگید توی صفحه از چندتاش استفاده کنه . حالا این اندازه رو خودش توی Mobile , Tablet , PC و ... میسنجه و براتون Responsive میکنه .



شما وقتی یکی از این فریمورک هارو بلد باشی بقیه رو هم راحت یاد میگیری چون بیشتر تو اسم فرق دارن !
روش بهترینی وجود نداره ولی استفاده از فریمورک ها راحتتر هستش و این اطمینان رو بهتون میده که Responsive شما با % بالایی درست هستش.
بله اما : media کاربرد دیگه داره یعنی میگم .وقتی کوچیک شد فلان دستور css اعمال بشه ! این کار رو گه با بوت استرپ میشه کرد ! پس مجبورم از media استفاده کنم