ریسپانسیو کردن وب سایت با استفاده از Material-UI
Material-UI یک فریمورک برای طراحی رابط کاربری است که در این مقاله در مورد آن توضیحات کاملی داده شده است . در این مقاله قصد داریم با روش ریسپانسیو کردن یک وب سایت با استفاده از این فریمورک آشنا شویم.
برای نماش یک وب سایت در هر دستگاهی لازم است که آن را ریسپانسیو کنیم . برای بهتر دیده شدن وب سایت در همه ی دستگاه ها با استفاده از Html و css می توانیم عملیات ریسپانسیو را انجام دهیم .
در وب سایت هایی که با reactjs توسعه داده می شود برای توسعه سریع تر و آسان شدن طراحی های پیچیده از فریمورک هایی استفاده می شود . یکی از این فریمورک ها Material-UI است که یکی از محبوب ترین های آن نیز هست برای این منظور استفاده می شود . با استفاده از این فریمورک طراحی های فوق العاده ای می توان انجام داد که یکی از آن ها ریسپانسیو کردن وب سایت با استفاده از این فریمورک است .
در این فریمورک مواردی برای ریسپانسیو کردن وب سایت ارائه شده از جمله Grid و Breakpoints و useMediaQuery و Hidden .
Grid : این مورد بین لایه ها یک سازگاری بصری ایجاد می کند و انعطاف پذیری بسیاری را در طراحی فراهم می کند .
Breakpoints : یک محدوده از پیش تعیین شده از صفحه را برای نمایش موارد خاصی از صفحه مشخص می کند .
useMediaQuery : به راحتی می توان query های مختلفی ، برای اعمال استایل های مختلف در اندازه های مختلف صفحه نمایش ، نوشت .
Hidden : هر عنصری که این صفت را بپذیرد با توجه به سایز تعیین شده در صفحه نمایش داده نمی شود .
برای اینکه با طریقه استفاده از هر کدام آشنا شویم یک مثال برای هر کدام می آوریم :
Grid:
|
1 2 3 4 5 6 7 8 9 10 11 |
<Grid container> <Grid item> <Paper className="item2">some code here</Paper> </Grid> <Grid item> <Paper className="item2">some code here</Paper> </Grid> <Grid item> <Paper className="item2">some code here</Paper> </Grid> </Grid> |
Grid ریشه صفت container می گیرد و Grid های فرزند صفت item می گیرد و داخل هر کدام از Grid ها می توان کد دلخواه را گذاشت .
Breakpoints :
|
1 2 3 4 5 6 7 8 9 |
<Grid container lg> <Grid item sm={6} xs={3}> <Paper>some code here</Paper> </Grid> <Grid item sm={6} xs={3}> <Paper>some code here</Paper> </Grid> </Grid> |
xs : خیلی کوچک : برای اندازه بین 0 پیکسل و بزرگتر
sm : کوچک : برای اندازه بین 600 پیکسل و بزرگتر
md : متوسط : برای اندازه بین 960 و بزرگتر
lg : بزرگ : برای اندازه بین 1280 و بزرگتر
xl : خیلی بزرگ : برای اندازه های 1920 و بزرگتر
این صفت می تواند برای Grid و Hidden استفاده شود .
useMediaQuery :
|
1 2 3 4 5 |
export default function SimpleMediaQuery() { const matches = useMediaQuery('(min-width:600px)'); return <span>{`(min-width:600px) matches: ${matches}`}</span>; } |
Hidden :
|
1 2 3 4 5 6 |
innerWidth |xs sm md lg xl |--------|--------|--------|--------|--------> width | xs | sm | md | lg | xl smUp | show | hide mdDown | hide | show |
با استفاده از صفت های somethingUp و somthingDown مثل smUp و mdDown می توان تعیین کرد که در کدام سایز عنصر مورد نظر نمایش داده نشود.
smUp : به این معنی است که تا اندازه صفحه نمایش از xl به sm نرسیده است عنصر نمایش داده نشود .
smDown : به این معنی است که تا اندازه صفحه نمایش از xs به md نرسیده است عنصر نمایش داده نشود .
طراحی ریسپانسیو امری ضروری در طراحی وب سایت هست و این گونه طراحی باعث جذب کاربران بیشتری می شود . امیدوارم که این مقاله مفید واقع شده باشد و اگر تجربه ای در این زمینه دارید حتما در بخش کامنت ها با ما به اشتراک بگذارید .
1 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
بسیار زیبا آموزش میدهید