آموزش ریسپانسیو با css
در این بخش از آموزش css از تاپ سایت 98 به سراغ آموزش ریسپانسیو با css می رویم. حال به آموزش کامل طراحی قالب ریسپانسیو می پردازیم و با استفاده از css یاد می گیریم چگونه یک قالب زیبای ریسپانسیو طراحی کنیم.
قالب های ریسپانسیو در هر دستگاهی اعم از کامپیوتر ، تبلت و موبایل بخوبی نمایش داده می شود. به همین دلیل نیازی به اپلیکیشن اندروید هم نیست.
طراحی وب ریسپانسیو چیست؟
طراحی وب ریسپانسیو (responsive) باعث می شود صفحه وب شما در همه دستگاه ها خوب به نظر برسد.
برای طراحی قالب سایت ریسپانسیو می توانیم از html , css استفاده کنیم.
مزیت ریسپانسیو بودن سایت
حال به مزیت ریسپانسیو بودن سایت می پردازیم.
صفحات وب با استفاده از دستگاه های مختلفی قابل مشاهده هستند: لپ تاپ ، تبلت و تلفن با سایزهای مختلف. بدون توجه به دستگاه ، صفحه وب شما باید خوب به نظر برسد ، و استفاده از آن آسان باشد.
هر کاربری با هر دستگاهی که سایت شما را مشاهده می کند نباید اسکرول افقی ببیند مثلا فردی که با موبایل وارد سایت می شود بایستی با دست بتواند سایت را به بالا یا پایین ببرد و همه قسمت ها را بدون مشکل مشاهده نماید.
عکس ها و فیلم ها و جداول باید ریسپانسیو بوده و کاربر همه عکس یا فیلم را ببیند.
Viewport چیست؟
Viewport قسمت قابل مشاهده کاربر در یک صفحه وب است.
قبل از تبلت و موبایل ، صفحات وب فقط برای صفحه نمایش کامپیوتر طراحی می شدند و معمولاً صفحات وب دارای طراحی استاتیک و اندازه ثابت بودند.
با افزایش تبلت و موبایل بحث واکنشگرا یا ریسپانسیو شدن قالب سایت مطرح شد. ما می توانیم در یک صفحه ، 4 باکس را در کنار هم قرار دهیم.
در تبلت دو باکس و در موبایل یک باکس و باکس ها را زیر هم قرار دهیم.
تنظیم Viewport
HTML5 روشی را در اختیار شما قرار داد تا طراحان وب بتوانند از طریق برچسبmeta صفحه نمایش را کنترل کنند.
شما باید عنصر مشاهده زیرmeta را در تمام صفحات وب خود وارد کنید:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
یک عنصر مشاهده meta دستورالعمل های مرورگر را در مورد چگونگی کنترل ابعاد صفحه و مقیاس بندی صفحه ارائه می دهد.
Grid-View چیست؟
Grid-View چیست؟ در فریم ورک های مطرحی مانند بوت استرپ ، صفحه نمایشگر را به 12 قسمت تقسیم میکنند.
اگر ما بخواهیم در صفحه محصولات ، 3 محصول را در کنار هم قرار دهیم هر باکس محصول 4 ستون را می گیرد و به این صورت قالب ریسپانسیو می شود.
می توانیم در تبلت آن را تغییر دهیم و 2 محصول را نشان دهیم یعنی 2 تا 6 ستون.
در موبایل نیز محصول زیر هم قرار می گیرد یعنی 12 ستون را می گیرد.
در ادامه مثال عملی می زنیم.
پروژه قالب ریسپانسیو
در زیر یک پروژه قالب ریسپانسیو را مشاهده می کنید. آن را در یک فایل با پسوند html کپی کنید ، ذخیره کنید و سپس اجرا نمایید.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
direction: rtl;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.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%;}
html {
font-family: Arial, Tahoma;
}
.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;
}
</style>
</head>
<body>
<div class="header">
<h1>تاپ سایت 98</h1>
</div>
<div class="row">
<div class="col-9">
<h1>آموزش ریسپانسیو</h1>
<p>آموزش Media Query در css (پروژه محور) بصورت کامل همراه با مثال و توضیح. در این آموزش به معرفی CSS3 Media Queries ، سینتکس ، نحوه استفاده از Media Query و چندین مثال خواهیم پرداخت.</p>
<p>صفحه را تغییر سایز دهید.</p>
</div>
<div class="col-3 menu">
<ul>
<li>ویندوز 10</li>
<li>ویندوز 8</li>
<li>ورد 2016</li>
<li>پاورپوینت</li>
</ul>
</div>
</div>
</body>
</html>
توضیح پروژه ریسپانسیو
حال به توضیح پروژه ریسپانسیو می پردازیم.
در پروژه بالا در style ما دو عنصر مهم را می بینیم کلاس row و کلاس col .
کلاس row برای بخش بندی و زیر هم قرار دادن عناصر استفاده می شود.
کلاس col عرض صفحه را به 12 ستون تقسیم میکند.
ما منوها را در 3 ستون قرار داده ایم و بقیه متون را در 9 ستون.
اگر صفحه را تغییر سایز دهید مشاهده می کنید که عرض ستون ها تغییر می کند و سایت ریسپانسیو یا واکنشگرا می باشد.
ویژگی اصلی ریسپانسیو بودن این است که اسکرول افقی نداشته باشیم. کاربر باید فقط صفحه را بالا و پایین ببرد یا در موبایل با انگشت بتواند به هر جای صفحه برود.
در ادامه پروژه را تغییراتی خواهیم داد.
برای راست چین شدن از دستور direction استفاده کرده ایم.
ریسپانسیو کردن تصاویر
برای ریسپانسیو کردن تصاویر می توانیم ما عرض آن را 100 درصد کنیم. در این صورت تصویر در باکس قرار می گیرد و کل عرض را می پوشاند.
ارتفاع عکس همزمان با عرض تغییر می کند و به همان نسبت تغییر نمی کند مزیت آن ، این است که تصویر خراب نمی شود.
در مواقعی نیاز است برای عرض از min-height یا max-height استفاده کنیم که بستگی به پروژه دارد.
مثال
پروژه ریسپانسیو کردن تصویر را در یک فایل با پسوند html قرار دهید . یک تصویر بنام a1.jpg در کنار آن بگذارید و سپس فایل را اجرا نمایید.
می توانید از تصویر بزرگ استفاده کنید تا نتیجه را ببینید.
تصویر به اندازه باکس (div) می شود یعنی تصویر ریسپانسیو شده است.
<html>
<head>
<style>
img{
width: 100%;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<a href="https://topsite98.com/">Click me!</a>
<div style="width:400px;background-color: #02a2ca;">
<img src="a1.jpg">
</div>
</body></html>
ریسپانسیو کردن ویدئو
برای ریسپانسیو کردن ویدئو کافی است عرض آن را روی 100 درصد بگذارید.
در مثال زیر ما یک تگ video را در صفحه html قرار داده ایم.
در بخش style برای تگ video استایل می نویسیم و عرض (width) آن را 100 درصد قرار می دهیم ویدئو ریسپانسیو می شود.
حال اگر با هر دستگاهی ویدئو را مشاهده نمایید یا سایز مرورگر را بزرگتر یا کوچکتر کنید ویدئو ریسپانسیو می شود.
<html lang="en">
<head>
<title>تاپ سایت 98</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
video{
width: 100%;
}
</style>
</head>
<body>
<video controls>
<source src="a.mp4" type="
</video>
</body>
</html>
مدیا کوئری
مدیا کوئری (media query) یکی از عناصر CSS است که در ریسپانسیو کردن قالب بسیار استفاده می شود.
ما با استفاده از آن می توانیم برای دستگاه های مختلف یا شرایط خاص ، استایل طراحی کنیم.
برای اینکه با مدیا کوئری (media query) در ریسپانسیو بیشتر آشنا شوید مثالی می زنیم.
در مثال زیر ما یک تگ H1 داریم که رنگ آن مشکی و پس زمینه آن سفید است .
هنگامی که صفحه را تغییر سایز می دهیم و کوچک می کنیم و کمتر از 600 پیکسل می شود چند اتفاق می افتد. رنگ پس زمینه عوض می شود ، رنگ تگ H1 تغییر می کند ، تگ H1 توپر می شود و با دستور margin از بالا 90 پیکسل فاصله می گیرد.
مثال
<html lang="en">
<head>
<title>تاپ سایت 98</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
h1{
color: red;
font-weight: bold;
margin-top: 90px;
}
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<a href="https://topsite98.com/">topsite98</a>
</body>
</html>
امیدواریم این آموزش از تاپ سایت 98 برای شما مفید باشد.
موفق باشید.
منبع: تاپ سایت 98
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
-
محمد
2021-05-07 00:02:44
سلام من در سایتم یک تگ <nav> دارم و ریسپانسیو روی همه اعمال میشه بجز اون چ کنم؟
سلام. متوجه سوال تان نشدم. اما باید چک کنید یکی از ابزارها در مرورگر inspect است که می تواند به شما کمک کند. -
ناشناس
2022-05-22 13:33:03
سلام بسیار عالی و آموزنده‌ای ممنون.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید