تفاوت بین min-width و max-width در طراحی ریسپانسیو

تفاوت بین min-width و max-width در طراحی ریسپانسیو

سلام و احترام خدمت بازدیدکندگان وب سایت آیم سئو ، امروز در خدمت شما هستیم با یکی آموزش نکات و ترفند های طاحی وب سایت با نام تفاوت بین min-width و max-width در طراحی ریسپانسیو ، امیدوارم همراه ما باشید.

 

 

تفاوت بین min-width و max-width :

تقریبا یکی از بزرگترین مشکلات و یا شاید سوالات برای طراحان وب ، استفاده از واحد های min-width و max-width می باشد ، شاید دلیل آن هم کاری است که هر دوی آن ها انجام میدهند ( من خودم تو یه پروژه  *** شدم سر همین فرق این دوتا ) ، حالا بر آن شدم تا بهتون این فرق رو آموزش بدم .

هر دوی این ویژگی های میتوانند برای واکنشگرا کردن صفحه وب یا همان ریسپانسیو مورد استفاده قرار گیرند ، ولی سوال اینجاست ؟ کدام یک؟

اجازه بدین اول تعریف کنم هر دوی اینارو ، ویژگی min-width در معنی عامیانه معادل کمترین طول می باشد و ویژگی max-width هم معادل بیشترین طول میباشد ، اما شاید کمی نامفهوم باشد ، اجازه بدهید با زبان ساده بگوییم ، وقتی شما از min-width برابر ۳۰۰ پیکسل استفاده میکنید ، به مرورگر میگویید که وقتی کاربری با عرض صفحه نمایش ۳۰۰ پیکسل یا بیشتر وارد شد ، این استایل هارا برای آن به نمایش بگذاز .

اما جریان max-width کلا فرق میکنه ، کاملا برعکس آن می باشد ، به عنوان مثال شما max-width را برابر با ۵۰۰ پیکسل قرار دادید ، به مرورگر میگویید اگر کاربری با صفحه نمایش با عرض ۵۰۰ پیکسل یا کمتر وارد شد این استایل هارا اعمال کن .

 

استفاده از کدام یک بهتر است ؟

کاملا سلیقه ای است ، ولی بهتر است طبق فرمایشات آقای گوگل طراحی های خود را بصورت First-Mobile انجام دهید ، یعنی از ابتدا برای موبایل رابط کاربری را طراحی کنید و سپس برای دیگر صفحه نمایش ها استایل هارا اعمال و طراحی و تنظیم کنید .

من خودم ار هر دو در پروژه ها بصورت @media (min-width: 992px) and (max-width: 1199px) استفاده میکنم .

 

 

امیدواررم از تفاوت بین min-width و max-width در طراحی ریسپانسیو رضایت داشته باشید .

تاریخ انتشار : ۲۰ بهمن