wp-user

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

14 پست در این موضوع قرار دارد

با سلام

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

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

با تشکر

0

به اشتراک گذاری این پست


لینک به پست

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

5

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

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

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

---------

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

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

ویرایش شده در توسط faver
0

به اشتراک گذاری این پست


لینک به پست

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

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

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

5

به اشتراک گذاری این پست


لینک به پست

اگر زیاد وارد نیستی می تونی ار بوت استرپ استفاده کنی

http://blog.webcity.ir/1392/09/06/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7/

2

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

ویرایش شده در توسط faver
0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

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

ویرایش شده در توسط reazah
1

به اشتراک گذاری این پست


لینک به پست

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

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

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


!important

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

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

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

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

3

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

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

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

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

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

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

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

ویرایش شده در توسط faver
0

به اشتراک گذاری این پست


لینک به پست


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

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


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

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

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

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

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

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

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

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

به اشتراک گذاری این پست


لینک به پست

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

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

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

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

سايتم

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

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

سايتم

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


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

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط poruamohammady
      سلام دوستان من یه مدت هست افزونه هایی که نصب می کنم ورد پرس بهم این اخطار هار رو میده کسی میتونه کمک کنه برای مثال تازگی ها افزونهwp-super cacheرو که نصب کردم این اومد قبلا هم چیزای دیگه بود مرسی اگر راهنمایی کنید

    • توسط mehran-b
      با سلام و عرض ادب خدمت تمامی کاربران انجمن وردپرس پارسی
       
      امروز یک کدی براتون قرار میدم که با استفاده از این کد میتونید به تمامی پست های یه دسته خاص از وب سایتتون متای robots با مقدار noindex,follow اضافه کنید.
       
      در صورت نصب بودن افزونه سئو وردپرس
      add_filter('wpseo_robots', 'mehran_specific_category_posts_add_noindex_yoast'); function mehran_specific_category_posts_add_noindex_yoast($content) { if(is_single() && in_category(777)) { return "noindex,follow"; } return $content; } در صورت نصب نبودن افزونه سئو وردپرس
      add_action('wp_head', 'mehran_specific_category_posts_add_noindex'); function mehran_specific_category_posts_add_noindex() { if(is_single() && in_category(777)) { $output = '<meta name="robots" content="noindex,follow" />' . "\n"; } echo $output; }  
      توجه1: کدهای بالا رو باید در فایل functions.php قالب سایتتون و زیر اولین
      <?php قرار بدید.
      توجه2: به جای عدد 777 در کد باید آیدی دسته ای رو قرار بدید که قراره پست هاش noindex,follow بشن.
       
      موفق باشید
    • توسط j1989m
      سلام
      لطفا اسلایدر این سایتو ببینید: https://beyamooz.com
      میخوام یه اسلایدر مثل لینک بالا داشته باشم: بطوریکه داخل هراسلاید چند تا عنصر مختلف (آیکون و متن) باشه که با اومدن هراسلاید، هریک از عناصر داخلش با انیمیشن خاصی ظاهر بشن، و با رفتن هراسلاید، عناصر داخلش هم با انیمیشن ناپدید بشن...ضمن اینکه ریسپانسیو و لمسی هم باشه...  ؟ ؟ ؟ ؟ ؟ ؟
      در حال حاضر اسلایدر زیر رو با کاروسل ساختم:
      https://codepen.io/j1989mah/pen/VzoOmY
      جمعا 3 تا اسلاید هست: داخل اسلاید دوم و سوم المان هایی رو قرار دادم... اما میخوام با اومدن و رفتن هراسلاید المان های داخلش با انیمیشن ظاهر و ناپدید بشن...
      ؟ ؟ ؟ ؟ ؟ ؟
       
    • توسط Fast-Learn
      سلام.
      من دارم یه قالب برای سایتم مینویسم، که طبعیتاً روی لوکالم بود. قالب کاملا توی پی سی ریسپانسیوه! یعنی وقتی صفحه ی مرورگر رو کوچیک میکنی، قالب خاصیت ریسپانسیویش کاملا صحیحه. یا وقتی از ابزار inspect element گوگل کروم قسمت تست ریسپانسیو بودنش استفاده میکنم، یا از سایتای تست ریسپانسیو بودن استفاده میکنم، باز هم کاملا سایت ریسپانسیوه!
      حالا اومدم شکل واقعیش رو توی گوشی ببینم، برای همین قالب رو روی هاست آپلود کردم، باز هم وقتی توی پی سی ریسپانسیو بودنش رو چک میکنم درسته، ولی وقتی توی موبایل نگاه میکنم اصلا ریسپانسیو نیست!
      توی چند تا موبایل تست کردم توی هیچکدوم ریسپانسیو نبود!
      برای ریسپانسیو کردن هم بیشتر جاها از قابلیتای فریم ورک materilize استفاده کردم و بعضی جاها هم دستی.
      ممنون میشم راهنماییم کنید!
      بد جوری اعصابمو خورد کرده
    • توسط MahTV
      سلام دوستان و اساتید عزیز
      اگه بخوایم به صورت شرطی (کوچک بودن صفحه نمایش ) تو موبایل یک باکس رو (مثل باکس دانلود) به کاربر در حالت چرخش صفحه نشون بدیم 
      و به کاربر بگیم که برا دیدن لینک ها باید گوشی موبایلت رو بچرخونی باید چیکار کنیم ؟
       
      من این کد رو از سایتی برداشتم ولی نمیدونم چطور باید ازش استفاده کنم 
      <div class="alerta"><b class="icon-screen-rotation"></b><p style="text-align: center;"><span style="font-family: tahoma,arial,helvetica,sans-serif;">برای دیدن لینکهای دانلود ، موبایل خود را بچرخانید . دقت کنید گزینه اسکرین روتیشن یا چرخش صفحه در دستگاه شما روشن باشد </span></p></div>