رفتن به مطلب

ریسپانسیو کردن سایت


پست های پیشنهاد شده

با سلام

اگر بخواهیم سایتی رو بعد از ساخته شدن و تکمیل شدن ، ریسپانسیوش کنیم

آیا میشه فقط با استفاده از media screen در css اینکارو انجام داد یا نیاز به کار دیگه ای هم هست؟

با تشکر

لینک به ارسال

با media screen باید انجام بشه ولی اگر قالب از اول با این پیش فرض تهیه نشده باشه ممکنه کار سختی باشه مخصوصا اگر اسلایدر یا بخش هایی که استایل از js می گیرند داشته باشه

لینک به ارسال

ولی اگر قالب از اول با این پیش فرض تهیه نشده باشه ممکنه کار سختی باشه

منظورتون از پیشفرض اینه که از قبل ساختن به فکر ریسپانسیو سایت باشیم ؟!

مخصوصا اگر اسلایدر یا بخش هایی که استایل از js می گیرند داشته باشه

در اینصورت چه باید کرد؟

---------

من بعضاً قالب هایی رو دیدم که چنتا فایل Js که نامشون responsive بود دارن

این فایل های js برای چه هست و در چه مواقعی ازشون استفاده میشه؟!

ویرایش شده توسط faver
لینک به ارسال

بستگی داره به قالب

من چند وقت پیش قالبی رو برای یکم مشتری آماده کردم که اسلایدر با اندازه عرض 800 پیکسل برای سیستم هالی خونگی داشت و برای سیستم های اندرویید و لبتاپ های کوچک یک اسلایدر دیگه با عرض 450 پیکسل داشت و یک اسلایدر دیگه هم ویژه موبایل های با صفحه تصویر بزرگتر از 320 در 240 داشت و از این اندازه به پایین هم اسلایدر رو حذف کردیم عوض بدل اسلایدرها رو با js انجام دادیم

جاوا اسکریپت اللخصوص با استفاده از کتابخانه جی کوئری و تکنیک آژاکس دست طراح رو چند برابر باز می کنه

لینک به ارسال

خب قالب ساخته شده هست و بوت استریپ دیگه فایده ای نداره

فقط میخوام بدونم که با media screen میشه بصورت کامل ریسپانسیو کرد؟ (حالا فوقش اسلایدرو در سایزهای پایین حذف می کنیم)

ویرایش شده توسط faver
لینک به ارسال

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

اگر قالب زده شده ستون ها و المان هارو متحرک کنی خیلی بهتره

تصاویر و ویدوها هم واکنش گرا باشه همجنین متن -یکم ریزه کاری داره

ویرایش شده توسط reazah
لینک به ارسال

باز هم بستگی داره

ببینید استایل اصول و قواعدی داره

یکیش اینه که آبشاریه یعنی همیشه استایلی که کدش پایین تر اجرا شه ارجعیت داره به بقیه مگر اینکه خاصیتی با


!important

مشخص شده باشه در اینصورت همیشه اون خاصیت ارجعه

و استنایلی که با جاوا اسکریپت نسبت داده بشه چون بعد از لود تغییر ایجاد می کنه کلا نسبت به css ارجعه

حالا اگر قالب شما یکی از این دوحالت توی استایلهاش باشه کارتون سخت می شه

تنها راه اینه که تست کنید اگربه مشکل خوردید مطرح کنید

لینک به ارسال

یکیش اینه که آبشاریه یعنی همیشه استایلی که کدش پایین تر اجرا شه ارجعیت داره به بقیه

منظورتون از این مورد چیه دقیقا؟!

تو سی اس اس که پایین و بالا نداره!

از طرفی من از !important فقط اینو میدونم که برای این میذارن تا مرورگر بین دو حالت برای یک عنصر ، اونیرو که !important یا به اصطلاح مهمتر هست رو مورد نظر قرار بده

ولی با این اوصاف من هنوز از این خاصیت ( !important ) استفاده نکردمو اصلا نمیدونم دقیقا در چه حالت هایی از !important باید استفاده کرد!

یعنی اگر قرار باشه ما برای یک متن دو رنگ مد نظر بگیریم و یکی رو خاصیت !important بدیم خب دیگه همین یک رنگو (color) میذاریم و اون کیو پاک میکنیم دیگه

پس چرا باید از !important استفاده کرد

نمیدونم منظورمو خوب رسوندم یا نه ولی اگر کمی در موردش توضیح بدینو همچنین از کاربردش در ریسپانسیو بگین ممنون میشم :)

ویرایش شده توسط faver
لینک به ارسال


<style type="text/css">
body {
background:blue;
}
body {
background:black;
}
</style>

صفحه را مشکی می کنه


<style type="text/css">
body {
background:blue !important;
}
body {
background:black;
}
</style>

صفحه را آبی می کنه

من در مورد دلیل اینکه نویسنده برنامه ای مثل css چرا یک کد را برای برنامه اش تعریف کرده نمی تونم توضیح بدهم

مشکل شما استفاده کردن از این کدها نیست

من عرض کردم سئوال شما سئوالی نیست که جواب عام بشه بهش داد

شما وقتی در مورد یک قالب خاص دارید سئوال می کنید لازمه که کدهای اون قالب دیده شده باشند تا بشه بهتون جواب داد

و پاسخ صحیح شما :

تنها راه اینه که تست کنید اگربه مشکل خوردید مطرح کنید
لینک به ارسال
  • 1 سال بعد...

من هم اين مشكل رو دارم

سابتم اندازش توي موبايل و تبلت تغيير نميكنه متاسفانه

من خيلي وارد نيستم شايد سوالم احمقانه باشه

ببينيد چنتا كد آماده براي اين كار وجود نداره كه با اضافه كردن به استايل خودكار توي تبلت و موبايل اندازه ها رو كم و زياد كنه؟

سايتم

لینک به ارسال

من هم اين مشكل رو دارم

سابتم اندازش توي موبايل و تبلت تغيير نميكنه متاسفانه

من خيلي وارد نيستم شايد سوالم احمقانه باشه

ببينيد چنتا كد آماده براي اين كار وجود نداره كه با اضافه كردن به استايل خودكار توي تبلت و موبايل اندازه ها رو كم و زياد كنه؟

سايتم

مشکل از کد زیر و جاهایی که از px استفاده کرده اید میباشد .


<div style="height: 225px; width: 966px; background: #f0eded; overflow: auto; direction: rtr;">

در واقع در ریسپانسیو بایستی این موارد را با % انجام دهید و

همچنین همان طور که استاد فحار گفتند :

برخی از جاها بایستی با media screen انجام شوند .

لینک به ارسال

سلام و وقت بخیر،

در جواب سوال استارتر باید عرض کنم بله، قالبی که قبلا طراحی شده رو فقط با استفاده از مدیاکویری های سی اس اس میشه ریسپانسیو کرد، اما برای حرفه تر شدن کار، بهتره از جی کویری هم استفاده بشه. مثلا کشویی کردن منوها، تغییر طول و عرض اسلایدر ها و ...

لینک به ارسال

خب قالب ساخته شده هست و بوت استریپ دیگه فایده ای نداره

فقط میخوام بدونم که با media screen میشه بصورت کامل ریسپانسیو کرد؟ (حالا فوقش اسلایدرو در سایزهای پایین حذف می کنیم)

بله میشه دوست عزیز

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...