طراحی Responsive با CSS
خوش اومدین به سی امین جلسه از دوره آموزش CSS. ما در بعضی از جلسات گذشته در مورد مواردی صحبت کردیم که به ما کمک میکرد یک صفحه وب رسپانسیو ایجاد کنیم. مهمترین بخشی که به ما کمک میکرد تا صفحه وب خودمون رو رسپانسیو کنیم مدیاکوئری بود همچنین ابزار دیگری مثل flex هم به ما کمک میکرد که راحتتر صفحات خودمون رو واکنشگرا طراحی کنیم. امروز قصد داریم در این جلسه نکات مهم در خصوص طراحی responsive رو مطرح میکنیم تا شناخت کامل و جامعی در مورد Responsive پیدا کنیم و راحتتر بتوانیم طراحی responsive رو انجام بدیم تا صفحه وب ما در همه صفحه نمایش های مختلف به خوبی و به شیوه دلخواه ما نمایش داده شود. در این جلسه ما با مفاهیم اولیه طراحی responsive آشنا میشیم.
طراحی Responsive چیست؟
خب همونطور که پیشتر توضیحاتی دادم در پاسخ به سوال بالا باید بگم: طراحی Responsive یعنی ما صفحه وب خودمون رو به شیوه ای طراحی کنیم که امکان نمایش اختصاصی برای صفحه نمایش مختلف را به بهترین شکل ممکن برامون محیا میکنه. طراحی رسپانسیو صفحات وب توسط CSS قابل پیاده هست.
بازدیدکنندگان صفحات وب معمولا از دستگاه های مختلفی مثل کامپیوتر، تبلت و گوشی های هوشمند برای بازدید از صفحات وب استفاده میکنند. یک وبسایت خوب باید بتواند برای هر دستگاهی بهترین حالت نمایش رو داشته باشه.
تصویر بالا رو ببینید: این صفحه وب بر روی دسکتاپ بصورت ۳ ستونه طراحی شده و برای تبلت به صورت ۲ ستونه. اگر کاربر ما با استفاده از موبایل این صفحه وب رو مشاهده کنه وبسایت ما رو بصورت تک ستونه میبینه. تصویر بالا تعریف کامل طراحی رسپانسیو هست.
ما میتونیم با مخفی کردن / نمایش ندادن، تغییر اندازه و جایگزین کردن و اضافه کردن المنت ها و عناصر مختلف، صفحات وب رسپانسیو خلق کنیم. هرچند ما یک نمونه ساده در درس مدیا کوئری از طراحی رسپانسیو انجام دادیم. اما امروز میخوام یه نمونه کمی پیشرفته تر رو براتون مثال بزنم. به کد صفحه وب که در پایین نوشتم نگاه کنید:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6 col-s-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="col-3 col-s-12">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
کد فوق صفحه ای شبیه به تصویر نمونه که بالاتر دیدیم رو برامون میسازه. من در ویدیو این جلسه این کد رو بصورت کامل آنالیز کردم که پیشنهاد میکنم حتما این ویدیو رو ببینید.
همونطور که میبینید من با استفاده از مدیا کوئری برای سه دیوایس موبایل، تبلت و دسکتاپ ستون بندی ها رو پیاده سازی کردم.
