https://virgool.io/feed/@m_49751734 fa 2026-06-10 12:59:02 https://static.virgool.io/images/default-avatar.jpg https://virgool.io/@m_49751734 https://virgool.io/@m_49751734/%D9%88%D8%A7%D8%AD%D8%AF-%D9%87%D8%A7%DB%8C-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87-%DA%AF%DB%8C%D8%B1%DB%8C-css-cbstnzzcwxoz یکی از مهم ترین وظایف طراح سایت دقت به اندازه المنت ها درون یک وبسایت است چونکه اندازه مناسب هر المنت در ایجاد ارتباط میان سایت و کاربر نقش بسیار مهمی را ایفا میکند که این امر موجب رشد سایت ما خواهد شد .واحد های اندازه گیری (css units) برای مقدار دهی به المنت ها روش های مختلفی در css وجود دارد که اصطلاحا به آنها css units گفته میشود . در ادامه به چند مورد از پر کاربرد ترین های آنها میپردازیم .px%emrem (root em)vh (viewport height)vw (viewport width)پر کاربرد ترین واحد های اندازه گیری در cssقبل از اینکه واحد های بالا رو توضیح بدم باید شما را با دو مفهوم واحد های مطلق (absolute) , واحد های نسبی (relative) آشنا کنم . همانطور که از اسم اونها پیداست واحد های مطلق (absolute) : واحد هایی هستند که تحت هر شرایطی مقدار اولیه خود را حفظ میکنند و بر اثر تغییر شرایط مقدار اولیه آنها تغییر نخوهد کرد .برای درک ساده تر این موضوع یک جسم جامد را تصور کنید که از داخل یک لیوان وارد ظرف شده آیا اندازه جسم جامد تغییر میکنه ؟ مسلما نه .و اما بریم سراغ واحد های نسبی (relative) : واحد های هستند که بر خلاف واحد های مطلق با تغییر محیط مقدار اولیه آنها تغییر پیدا میکنه و مقدار جدیدی پیدا میکنند .برای توضیح این مطلب هم اینبار یک لیوان آب را در نظر بگیرید که وارد یک ظرفی دیگر میشود آیا شکل اب تغییر میکنه ؟ بله و اندازه ظرف جدید رو میگیره .خب بهتره که این موضوع رو با چند مثال دیگر هم بررسی کنیم .فرض کنید که یک صفحه نمایشگر با ابعاد 1366 * 768 داریم و به div اول کلاس div_1 مقدار عرض مطلق 273 px بدیم و به div دیگری مقدار عرض نسبی 20% بدیم ..div_1{ width: 273px; } .div_2{ width: 20%; }در قدم اول میزان عرض این دو عنصر برابر است اما با کوچک و بزرگ شدن صفحه میبینیم عنصر اول که از واحد مطلق برای مقدار دهی عرض آن استفاده کرده ایم هیچ تغیری نمیکند اما عرض عنصر دوم که از واحد نسبی برای مقدار دهی استفاده شده بر اساس عرض صفحه تغییر میکند.عرض 1366px عرض 600pxعرض 2560pxالان که تفاوت واحد های مطلق و نسبی رو به طور کامل درک کردیم بهتره css unit هارو به این دو دسته تقسیم بندی کنیم .واحد های مطلق (px) واحد های نسبی (em , rem , vh , vw , %)حالا سوال اصلی که ایجاد میشه اینه که واحد های نسبی نسبت به چه عاملی واکنش نشون میدن و تغییر میکنن ؟واحد های (rem , em) نسبت به fontsize تغییر میکنند . یعنی اگه fontsize : 32px باشه 2em , 2rem برابر با 32px خواهند بود .تفاوت rem , em هم در اینه که :واحد em نسبت به font-size پدر خودش تغییر میکنه .واحد rem نسبت به font-size سند html تغییر میکنه .واحد های vw , vh هم نسبت به اندازه viewport تغییر میکنند .یعنی 1vh برابر اندازه 1 درصد ارتفاع viewport است . amir mohammad faramasumi amir mohammad faramasumi Thu, 17 Feb 2022 21:38:35 +0330 https://virgool.io/@m_49751734/%D9%81%D9%84%DA%A9%D8%B3-%D8%A8%D8%A7%DA%A9%D8%B3-flex-box-%DA%86%DB%8C%D8%B3%D8%AA-hg3lhys9ex43 اگه در حال یادگیری طراحی وبسایت هستید حتما اسم flexbox , grid به گوشتون خورده و حتی شاید هم با اونها کار کرده باشید اما اگر هیچ ایده ای درباره اینکه این دو چی هستند و چرا از اونها استفاده میکنیم ندارید حتما تا اخر این پست با من همراه باشید.اولین نکته ای که باید به اون اشاره کنیم طراحی layout یک وبسایت است . layout به معنی طرز چینش المنت ها درون یک وبسایت است که برنامه نویسان قبلا از position ها و clear & float استفاده میکردند که مشکلات زیادی را به همراه داشت و طراحی را برای اونها به شدت دشوار میکرد.اما الان با اومدن ماژول های جدید و اضافه شدن flexbox , gird به css3 طراحی layout یک صفحه وب برای برنامه نویسان به شدت آسان تر و حتی لذت بخش تر شده .به این صورت که برای چینش های تک بعدی (one dimension) از flexbox و از gird برای چینش های دوبعدی (two dimension) استفاده میشه .اگه بخوام که به زبان ساده توضیح بدم در flexbox ما یک column رو به چندین row و همون row رو به چندین column تقسیم بندی میکنیم . برای همینه که برای طراحی و چنیش تک بعدی خیلی خوبه .خب الان که با flexbox اشنا شدیم و دید کلی نسبت به اون پیدا کردیم بهتره یکم با جزییات بیشتر اون رو بررسی کنیم .اگه بخواهیم با flexbox المنت های شکل بالا را کنار هم بچینیم :حاشیه طلایی دور جعبه ها -> container و مربع های رنگی -> المنت های ما هستند. در بالا به این نکته اشاره کردیم که flexbox برای طراحی تک بعدی مناسب است پس باید با استفاده از row , column المنت ها را تقسیم بندی کنیم.مستطیل زرد رنگ بالا را یک row01 در نظر میگیریم و تمام مستطیل و مربع های دیگر را درون container فرضی row02 در نظر میگریم .وrow 02 را به دو column دیگر تقسیم بندی میکنیم به این صورت که مربع ابی رنگ سمت چپ درون یک container فرضی به اسم column 02_01 و تمامی سه مستطیل باقی ماده درون container به اسم column 02_02 .و الان column02_02 را دوباره به دو سطر دیگر تقسیم بندی میکنیم به این صورت که مستطیل سبز و نارنجی رنگ درون یک container به نام row 02_02_01 قرار میگیرند و مستطیل قرمز رنگ درون row 02_02_02 قرار میگیرد و در نهایت row02_02_01 را هم به دو column دیگر تقسیم بندی میکنیم .مهم ترین نکته در خصوص توضیحات بالا این است که هر column یا هر row متواند همزمان item یک container بزگتر از خودش باشد و یا container چندین item کوچک تر از خودش باشد .و نکته دوم اینکه ما نمیتوانیم در flexbox به صورت همزمان چندین row , column داشته باشیم .در این مقاله هدف صرفا آشنایی شما با دو ماژول مهم css3 یعنی flexbox , grid بود و در مقاله ای دیگر حتما با این دو بیشتر اشنا خواهیم شد .امیدوارم که از مطالعه این مقاله لذت برده باشید . amir mohammad faramasumi amir mohammad faramasumi Mon, 14 Feb 2022 16:40:17 +0330 https://virgool.io/@m_49751734/%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%DA%86%DB%8C%D8%B3%D8%AA-qvjsmfbtgtyy ما در طول روز و در حال وبگردی وبسایت های بسیار زیادی را مشاهده میکنیم .همگی وبسایت ها از دو بخش بسیار مهم تشکیل شده اند :1)فرانت اند (front-end)2)بک اند(back-end)همه اجزای سایت که توسط کاربر قابل مشاهده هستند قسمت front-end یک وبسایت را تشکیل میدهند.برای مثال سایت فروشگاهی دیجی کالا را در نظر بگیرید :تمامی محتوای متنی و طرح های گرافیکی جز قسمت فرانت اند این سایت هستند.اولین و مهم ترین سوالی که برای همه شما ایجاد میشه این هستش که چطور میتونیم این قالب رو به عنوان یک برنامه نویس سایت رو ایجاد بکنیم ؟به دنیای برنامه نویسی فرانت اند خوش اومدید !برای اینکه بهتر مفاهیم فرانت اند رو درک کنید بهتره که بدن یک انسان رو در نظر بگریرید . پوست و زیبایی = css سیستم عصبی = java-script ساختمان و اسکلت بدن = html پایه بدن انسان استخوان هاست و اسکلت بدن موجب قرار گرفتن اعضای بدن در کنار هم میشود .دقیقا کاری که تگ های html انجام میدهند . پس html شباهت زیادی به اسکلت بدن انسان و tag ها شباهت زیادی به استخوان های بدن انسان دارند.اول اینکه html (hyper text markup language) یک زبان نشانه گذاری است پس یعنی مکان المنت هارو توی یک صفحه وب نشانه گذاری میکنه .اگر بخواهیم ساختار html و شباهت اون با اسکت بدن را مقایسه کنیم . بدن انسان از نظر تقسیم بندی منطقی به سه بخش : بالا تنه و میان تنه و پایین تنه تقسیم میشه که هر کدوم از این بخش ها شامل اجزای کوچک تر بدن میشن مثل دست و پا و چشم و .... .دقیقا مانند تقسیمی که با html انجام میدیم : header , main , footer . و هر کدوم از این قسمت ها هم اجزای کوچک تری رو درون خودشون جای میدهند.نمونه ای از ساختار یک قالب وبسایتبعد از اینکه ترتیب و نظم چینش المنت هارو درون یک وبسایت مشخص کردیم نوبت میرسه به ظاهر المنت ها خب از اونجایی که هممون میدونیم بدن انسان بدون پوست و گوشت ظاهر خوبی به هیچ عنوان نداره برای اینکه سایت زیبا و کاربر پسندی داشته باشیم میبایست از property های css به خوبی استفاده کنیم خب حالا که به کمک html , css تونستیم المنت هارو ایجاد کنیم و به اونها استایل های مناسب بدیم وقتش میرسه که به وبسایت روح بدیم در حقیقت java-script همون سیستم عصبی بدن انسان است که به بدن دستور انجام کار هارو میده کاربر هم با استفاده از جاوا اسکریپت به وبسابت دستور میده و وبسایت رو از حالت خشک و دو بعدی خودش خارج میکنه و اصطلاحا اون رو از حالت (web1=static) به (web2=dynamic) تغییر میده .خب دوستان سعی کردم تا به اینجا کار یک دید کلی و سطحی از نحوه طراحی وب سایت به شما بدم تا دوستانی که در این حوزه تخصص و آشنایی لازم رو ندارند بتوانند مطلب را به سادگی درک کنند . حالا که آشنایی نسبی پیدا کردیم بهتره به سراغ کتابخانه ها و فریم ورک های css , javascript بریم .مهم ترین عنوان بعد از اینکه تونستیم یک قالب وبسایت رو با استفاده از html , css طراحی کنیم ریسپانسیو کردن قالب وبسایت است.ریسپانسیو کردن یک وبسایت یعنی واکنش پذیر کردن المنت های یک سایت نسبت به view port های مختلف .توانایی ریسپانسیو کردن یک وبسایت برای یک برنامه نویس فرانت اند لازم و ضروری چون که اکثر کاربران از گوشی های موبایل خود برای وب گردی استفاده میکنن .برای ریسپانوسیو کردن یک وبسایت حتما میباست مفاهیم flex , grid و meida-query ها رو به خوبی یاد بگیریم . که در این زمینه bootstrap یکی از فریم ورک های css خیلی میتونه با ما کمک کنه و کار رو برای ما ساده تر کنه .بعد از اون میرسیم به انتخاب یکی از pre-processor های css به نام sass که دونستن اون باعث این میشه که با یاد گرفتن اون از تکرار کد های css جلوگیری کنیم مثلا یک رنگ یا اندازه رو داخل متغییر ذخیره میکنیم و از متغیر ها استفاده میکنیم .و در آخر یکی از فریم ورک های java-script رو انتخاب کنیم react , angular , vue و به همراه jquery برای راحتی و سرعت در کد های javascript از اونها استفاده میکنیم.دوستان عزیز سعی کردم در این مقاله دید کلی در باره مسیر تبدیل شدن به یک توسعه دهنده فرانت اند رو به شما بگم اما مهم ترین خصوصیت یک برنامه نویس مهارت سرچ و به روز بودن . پس فقط فراگیری تکنولوژی های ذکر شده کافی نیست و شما حتما میبایست درباره تکنولوژی های جدید تحقیق کنید و سعی کنید همیشه به روز باشید .امیدوارم که این مقاله براتون مفید بوده باشه با آرزوی مفقیت برای تک تک شما عزیزان . amir mohammad faramasumi amir mohammad faramasumi Mon, 07 Feb 2022 23:47:40 +0330