یکی از سخت ترین کارهای توی طراحی سایت رسپانسیو کردن وب سایت برای دیوایس های مختلف هستش. در جلسات قبل آموزش HTML از بی اس دیزاین اکادمی اشاره مختصری به روش اولیه دسپانسیو کردن گفتیم بهتون. استفاده از viewport یکی از این روش ها هست. ولی با این روش نمیشه همه وب سایت رو رسپانسیو درآورد. حتما باید روش های دیگه هم بلد باشین که بتونین وب سایت رو به بهینه ترین حالت ممکن در بیارین. تمام المان ها باید بزرگ بشه کوچیک بشه ستون ها متفاوت نمایش داده بشه تا نهایتا کاری که شما میخواین به کاربر نشون بدید درخور وب سایت باشه و مخاطب بخاطر عدم نمایش صحیح وب سایتتون از وب سایتتون نره بیرون .
رسپانسیو با روش viewport
توی دوره های قبلی آموزش HTML اومدیم توضیح دادیم که یه خط کد چه کاری میتونه برامون انجام بده !
<meta name="viewport" content="width=device-width, initial-scale=1.0">
رسپانسیو کردن عکس ها در HTML
توی جلسات قبلی آموزش HTML در بی اس دیزاین آکادمی یاد گرفتیم که میتونیم به عکس ها عرض و ارتفاع بدیم . ولی آیا این عرض و ارتفاع توی همه دیوایس ها یجوری خاص نمایش داده میشه یا برای هر دیوایس مختلف هست ؟! جواب این هست که عرض ۲۰۰ پیکسل در یه گوشی ممکنه نصف صفحه رو بگیره و در صفحه دیگه یه گوشی ممکنه یک سوم صفحه رو پوشش بده. ممکنه در یک صفحه لپ تاپ فقط یک پنجم صفحه باشه و در یکی دیگه یک دهم. واسه همین برای اینکه بیایم رسپانسیو کنیم عکس ها رو کافیه بهشون به جای پیکسل عرض رو بصورت درصد تعریف کنیم . یعنی بگیم ۵۰ درصد ! یعنی هر چقدر جا داشته باشه این عکس توی المان بالایی یا صفحه میاد ۵۰ درصد اون رو برای عکس در نظر میگیره . اگر هم که بیایم بذاریم ۱۰۰ درصد یعنی تمام فضا رو اشغال کنه این عکس ! میتونین کد رو داخل ویژگی style تعریف کنین و بوم !
<img decoding="async" src="img_girl.jpg" style="width:100%;">
بیشتر این موارد که الان داریم میگیم برای دوره CSS هست ولی الان آشنایی حدودی داشته باشین بدنیست . یه گزینه هم وجود داره بنام max-width این میاد میگه المان هر چقدر خواست لود بشه ولی بیشترین اندازه اش اینقدر باشه . وقتی به کارمون میاد که ما به پیکسل درج کردیم اندازه عرض رو و توی یک دیوایس قراره خیلی بزرگ نمایش داده بشه و میایم از این خصوصیت استفاده میکنیم تا محدود کنیم اون المان رو .
<img decoding="async" src="img_girl.jpg" style="max-width:100%;height:auto;">
تو جلسات قبل تر در آموزش HTML در بی اس دیزاین آکادمی هم گفتیم که میتونیم از تگ picture استفاده کنیم و بگیم برای این سایز این عکس و برای سایز دیگه هم این عکس رو لود کن .
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img decoding="async" src="img_smallflower.jpg" alt="Flowers">
</picture>
این راه ها برای عکس هست و الان میخوایم بریم سروقت متن هامون !
رسپانسیو کردن متن ها در HTML
برای رسپانسیو کردن متن ها هم راهی وجود داره که میتونیم توی CSS سایز رو بر اساس عرض صفحه ببندیم . استفاده از واحد vw که خلاصه شده viewport width هست استفاده میکنیم . یه جورایی مثل درصد کار میکنه ولی حرفه ای تر ! چون ما اومدیم سایز صفحه کاربر رو گرفتیم توی این واحد و میگیم بر اساس این سایز عرض صفحه کاربر بیا این متن رو سایز بده بهش . مثال زیر رو ببینین :
<h1 style="font-size:10vw">Hello World</h1>
حالا اصلا طرز استفاده این خصوصیت واحد چطوری هست !؟ اینجا که ما اومدیم گفتیم 10vw یعنی بیا عرض صفحه رو بگیر هر چقدر که هست وبیا ۱۰ درصد رو به این المان اختصاص بده و سایز ۱۰ درصد صفحه بشه اون المان . بطور مثال اگر سایز ابعاد صفحه کاربر ۵۰۰ پیکسل باشه این مقدار 10vw میشه ۵۰ پیکسل که میشه سایز اون متن !
مدیا کوعری ها (Media Query)
علاوه براین که تمام موارد بالا رو میتونیم انجام بدیم میتونیم CSS اختصاصی برای اون سایز در نظر بگیریم که بگیم اگر سایز از این مقدار تا این مقدار بود این کدها رو استفاده کن در غیر اینصورت کد دیگه ای باید استفاده بشه و کار سختی هست که بیایم برای هر سایز مختلف بازه در نظر بگیریم و بگیم که توی این ابعاد بازه این کدها لود بشه . در آموزش HTML زیاد وارد جزییات نمیشین و مثال پایین رو ببینین تا نحوه نوشتن کدها رو متوجه بشین :
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
float: left;
width: 60%; /* The width is 60%, by default */
}
/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
رسپانسیو کردن با استفاده از فریم ورک ها
توی دوره CSS میایم درباره فریم ورک ها کامل صحبت میکنیم. ولی در همین حد الان باید بدونین که فریم ورک ها اومدن کار ما رو خیلی راحت کردن توی CSS نویسی . (بعضی هاشون هم که اصلا نمیخواد کد بزنی !) چرا که اون ها اومدن فایل های CSS رو داخل بستری برای شما فراهم کردن و شما فقط باید از اون اصول فریم ورک استفاده کنین تا بتونین کدهای تمیز و راحتی در دیوایس های مختلف پیاده سازی کنین . یکی از معروف ترین فریم ورک ها Bootstrap هست که باهاش خیلی کارهامون جلو میره و کدهای تمیز در میان. میتونین سطر بسازین و ستون ها و رسپانسیو و … همه کار ! مثال زیر رو فقط ببینین تا متوجه بشین چقدر قشنگ میشه کار کرد توش :
استفاده از بوت استرپ
تو هر سایزی خواستین تست کنین این صفحه رو !
ستون 1
لورم ایپسوم...
ستون 2
لورم ایپسوم...
ستون 3
لورم ایپسوم...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link data-minify="1" href="https://bs-design.ir/wp-content/cache/min/1/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css?ver=1711629528" rel="stylesheet">
<script data-minify="1" src="https://bs-design.ir/wp-content/cache/min/1/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js?ver=1711629529" defer></script>
</head>
<body data-rsssl=1>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
