آموزش HTML – قسمت بیست و یکم(واکنش گرا)
سلام
با جلسه بیست و یکم از آموزش HTML در خدمتتون هستیم، در این جلسه می پردازیم به مفهوم واکنش گرایی(ریسپانسیو).
- واکنش گرا(ریسپانسیو) چیست؟
مفهوم Responsive یا به زبان فارسی واکنش گرا بودن، به سایتی گفته میشه که متناسب با اندازه نمایشگر(موبایل،تبلت،کامپیوتر) عناصر صفحه هم، هم اندازه با نمایشگر بشن(مثل سایت بپرسم که واکنش گرا است، شما با هر دستگاهی اعم از موبایل،تبلت یا کامپیوتر بیاید عناصر استفاده شده در سایت متناسب با اندازه نمایشگر شما میشن).
- نوشتن کدهای واکنش گرا:
برای نوشتن کدهای واکنش گرا راه ها و روش های مختلفی وجود داره، هم میتونید خودتون دستی اقدام به نوشتن کدها کنید و هم با استفاده از فریم ورک هایی مثل بوت استرپ، در بپرسم یک مثال ساده برای ریسپانسیو زدیم که با مفهوم و طرز نوشتن بیشتر آشنا بشید(بحث واکنش گرا بحث کاملا پیچیده و گسترده ای هست که نیاز به یک دوره آموزشی کامل داره که در آینده در بپرسم خواهیم گذاشت) :
کد:
<html lang="fa">
<head>
<title> مثال ساده ریسپانسیو </title>
<meta charset="UTF8">
<style>
.sg{
float: left;
margin: 10px;
padding: 10px;
max-width: 300px;
max-height: 200px;
border: 1px solid black;
}
h1,h2{
text-align:right;
direction:rtl
}
p{
text-align:right;
direction:rtl
{
</style>
</head>
<body>
<h1>نمونه قالب ریسپانسیو</h1>
<h2>صفحه را تغییر اندازه دهید!</h2>
<div class="sg">
<h2>ارسال سوال</h2>
<p>در بپرسم میتوانید سوالات خود را بپرسید و پاسخ سوالهایتان را دریافت کنید.</p>
</div>
<div class="sg">
<h2>ارسال مطلب</h2>
<p>بپرسم آماده است تا مقالات و مطالب شما را با اسم خودتان منتشر کند.</p>
</div>
<div class="sg">
<h2>بپرسم</h2>
<p>بپرسم مکانی برای یادگیری و حل مشکلات است ، در بپرسم می توانید سوالات خود را بپرسید و در پاسخ گویی به دیگر سوالات سهیم باشید ، همچینن اگر علاقه مند به نویسندگی هستید می توانید مطالب خود را برای ما ارسال کنید تا با نام خودتان در سایت قرار گیرد .</p>
</div>
<div class="sg">
<h2>درباره ما</h2>
<p>بپرسم با هدف خدمت و کمک رسانی به کاربران فارسی زبان راه اندازی شده است و امیدواریم با کمک شما بتوانیم در این امر خطیر موفق شویم.</p>
</div>
</body>
</html>
پیش نمایش: کلیک کنید.
برای نوشتن یک قالب واکنش گرا دو کد max و min بیشترین کاربرد را دارند.
- max
معنی کلمه max بیشترین یا حداکثر است و در کدهامون میتونیم مشخص کنیم که حداکثر عرض و ارتفاع یک عنصر چقدر باشه.
sg{
max-width:500px;
max-height:250px;
}
- min
معنی کلمه min هم کمترین یا حداقل است و در کدهامون میتونیم مشخص کنیم که حداقل عرض یک عنصر چقدر باشه.
sg{
min-width:500px;
min-height:250px;
}
این بحث فقط مقدمه ی کوتاهی بود از واکنش گرا(Responsive) که با مفهوم و کاربرد واکنش گرا آشنا بشید.
انشاءالله در طول یک دوره با این مبحث به طور مفصل آشنا میشیم.
با ما باشید تا آموزش های بعدی …
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید