نیازمند آموزش واکنشگرا کردن سایت

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

با Html و Css هم آشناییت دارم
باتشکر

- - - Updated - - -

آپ .....

سلام،

من با آموزش های موجود در نت (فارسی و غیر فارسی) و آزمون و خطا یاد گرفتم. شما هم جستجو کنید حتما آموزش هایی پیدا می کنید.

منبع فارسیِ خوب که فکر نکنم بشه پیدا کرد
ولی منبع زبان اصلی تا دلت بخواد هست.

البته این طور نیست که یک روال معلوم داشته باشه واکنشگرا کردن سایت که دنبالش کنی و کار تموم بشه
باید کار کنی و با تمامی برچسب های html 5 و مشخصه های css 3 آشنا باشی
چنتا سایت یا قالب که واکنشگرا کردی، کم کم کار دستت میاد

آموزش ها و کتاب های انگلیسی هم فتّ و فراوون هست...

با تشکر از جواب دوستان
بنده یه سری آموزش پیدا کردم فقط مقدار رو با درصدد مشخص کنم یا با پیکسل ؟

بهترین و ساده ترین کارش درصدی کردن مقدار هاست.

بعد از اون, میتونید از نمونه زیر استفاده کنید:

کد:

---

#mydiv {
    width: 50%;
}
@meta screen and (max-width: 700px) {
    #mydiv {
                width: 75%;
      }
}

---

در این مثال, در صورتی که پهنای صفحه (هرچی زور میزنم معنای فارسیش یادم نمیاد ... :(() به 700پیکسل برسه, عرض ایدی mydiv به 75% تغییر میکنه. در غیر این صورت, عرض mydiv تنها 50% صفحه خواهد بود....

سلام،

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

نقل قول:

---

نوشته اصلی توسط mojtaba05

سلام،

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

---

با تشکر از شما
منظور از بعضی از عناصر چیه ؟
چه عناصری ؟

این بستگی به قالب داره. معمولا عناصری که نقش container یا wrapper رو دارند و width اون ها ثابت تعریف شدن نیاز است که در شروع کار به درصد تبدیل بشن. ولی مثلا کادر هر محصول فروشگاه که width اون ها 250px است، نیازی نیست تغیر کنند.
بعضی مواقع نیاز میشه که مارجین و پدینگ بعضی از عناصر رو به درصد تبدیل کرد.
گاهی اوقات هم باید به فکر border عناصر بود که مشکل ساز نشن و اسکرول بار افقی ظاهر نشه.
float , height, overflow هم از موارد پرکاربرد در هنگام ریسپانسیو سازی که باید بهشون توجه داشت. مثلا هدری که در حالت عادی ارتفاع ثابت 140px براش تعریف شده و افقی نمایش داده میشه. در موبایل به حالت عمودی درمیاد و در نتیجه 140px دیگه برای پوشش دادن عناصر داخلش جوابگو نیست و باید height: auto رو براش گذاشت.