راهنمای سیستم شبکه بندی بوت استرپ
آموزش سیستم شبکه بندی در بوت استرپ در این مطلب از مجموعه آموزش های وب یار می خواهیم سیستم شبکه بندی بوت استرپ ر...
تا به حال مطالب زیادی در خصوص ریسپانسیو کردن وب سایت توسط تیم طراحی سایت وب یار در اختیار شما عزیزان قرار گرفته، در این پست آموزشی قصد داریم تمامی نکات درخصوص ریسپانسیو کردن تصاویر را به شما معرفی کنیم.در مورد ریسپانسیو کردن صفحات وب سایت مطلب آموزشی ریسپانسیو کردن جداول responsive table را حتما بخوانید.
یه نکته خیلی ساده و آموزشی اینه که اول از همه از خصوصیت مهم width استفاده کنید,ومقدار آن را برابر ۱۰۰% قرار دهید.همانند مثال زیر :
img {
width: 100%;
height: auto;
}
دومین نکته در خصوص طراحی ریسپانسیو تصاویرآن است که خاصیت background-size که برابربا مقدار “contain” قرار بگیرد.اگر چه با این مقادیر برای خصوصیت background-size تصویر ریسپانسیو میشود,اما تصویر بین عرض و طولی که در کدهای css برایش تعریف شده است قرار میگیرد. بنابراین تصویر به عنوان بگراند تمامی ناحیه
Contain را نمیپوشاند و مابین این ناحیه قرار میگیرد.
div {
width: 100%;
height: 400px;
background-image: url(‘img_flowers.jpg’);
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
در صورتی که خصوصیت background-size را برابر با مقدار “۱۰۰% ۱۰۰%” باشد, تصویر مورد نظر با هر طول و عرضی کشیده میشود تا درون ناحیه ی content قرار بگیرد.
div {
width: 100%;
height: 400px;
background-image: url(‘img_flowers.jpg’);
background-size: 100% 100%;
border: 1px solid red;
}
خصوصیت background-size:cover باعث میشود تا تصویر شما مقیاس بندی شود تا اینکه تمامی ناحیه ی content را بپوشاند.با توجه به مثال زیر به درک بهتری از این مطلب میرسید.
div {
width: 100%;
height: 400px;
background-image: url(‘img_flowers.jpg’);
background-size: cover;
border: 1px solid red;
}
یک تصویر بزرگ میتواند بر روی یک کامپیوتر با صفحه نمایش بزرگ به صورت کامل نمایش داده شود اما بر روی یک صفحه ی کوچک به درستی نمایش داده نشود.
به منظور کاهش حجم لود تصاویر و یا به هر دلیل دیگری شاید شما بخواهید برای صفحه نمایش های مختلف از تصاویر مختلف استفاده کنید.بنابراین بهتر است که شما برای وسایل گوناکون با صحفه نمایش های گوناگون تصاویر گوناگون را لود کنید.
در زیر ما دو تصویر با اندازه گوناگون داریم:
/* For width smaller than 400px: */
body {
background-image: url(‘img_smallflower.jpg’);
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url(‘img_flowers.jpg’);
}
}
همان طور که از کدهای بالا مشخص است برای صفحه نمایش های کمتر از ۴۰۰ پیکسیل میخواهیم که تصویر کوچک تر نمایش داده شود,. و برای صفحه نمایش های بیشتر از ۴۰۰ پیکسل تصویر بزرگتر رانمایش دهد,چون لزومی ندارد که برای صفحه نمایش های کوچکتر تصویر بزرگتر لود شود.
نکته بسیار مهم و کاربردی در عرض صحفه های نمایش:شما میتوانید برای نمایش تصاویر گوناگون با اندازه های گوناگون به جای کد min-width از کدmin-device-width استفاده کنید، چرا که این کد برای نمایش تصاویر گوناگون با اندازه ای گوناگون به جای عرض مرورگرهای گوناگون عرض صفحه نمایش های گوناگون را قرار میدهد.
/* For devices smaller than 400px: */
body {
background-image: url(‘img_smallflower.jpg’);
}
/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
body {
background-image: url(‘img_flowers.jpg’);
}
}
با سلام ممنونم خیلی بهم کمک کرد گیر کرده بودم