طراحی وب واکنشگرا در HTML
یک طراحی واکنشگرا صفحه وب شما را در هر دستگاهی که باشد مناسب آن دستگاه نشان می دهد.
یک طراحی وب واکنشگرا به طور خودکار برای اندازه و صفحه نمایش مختلف صفحه نمایش تنظیم می شود.
طراحی وب ریسپانسیو چیست؟ (واکنشگرا)
طراحی وب واکنشگرا استفاده از HTML و CSS برای تغییر اندازه ، مخفی کردن ، کوچک کردن یا بزرگ کردن خودکار یک وب سایت است تا در همه دستگاه ها (دسک تاپ ، رایانه لوحی و تلفن) ظاهر خوبی داشته باشد:
توجه: وب سایت شما باید در تمامی دستگاه ها ظاهر مناسب و خوب داشته باشد
تنظیم Viewport
برای ایجاد یک وب سایت پاسخگو ، برچسب <meta> زیر را به تمام صفحات وب
خود اضافه کنید:
با این کار نمای صفحه شما تنظیم می شود ، که به شما دستورالعمل هایی برای کنترل اندازه و مقیاس صفحه می دهد.
در اینجا مثالی از یک صفحه وب بدون متا برچسب ویوپورت و همان صفحه وب با متا برچسب مشاهده وجود دارد:
نکته : : اگر در حال مرور این صفحه از طریق تلفن یا رایانه لوحی هستید ، می توانید روی دو پیوند بالا کلیک کنید تا تفاوت را ببینید.
تصاویر واکنشگرا
تصاویر ریسپانسیو تصاویری هستند که به خوبی متناسب با هر اندازه مرورگری مقیاس می شوند.
با استفاده از ویژگی عرض (width)
اگر ویژگی width روی 100٪ تنظیم شود ، تصویر پاسخگو خواهد بود و مقیاس بالا و
پایین می رود:
توجه داشته باشید که در مثال بالا ، تصویر می تواند بزرگتر از اندازه اصلی خود باشد. در بسیاری از موارد ، راه
حل بهتر استفاده از ویژگی حداکثر عرض max-width به جای آن خواهد بود.
با استفاده از ویژگی حداکثر عرض ( max-width)
اگر ویژگی حداکثر عرض max-width روی 100٪ تنظیم شود ، در صورت لزوم ، تصویر
پایین می آید ، اما هرگز اندازه آن بزرگتر از اندازه اصلی نیست:
نمایش تصاویر مختلف بسته به عرض مرورگر
المان
<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
src="img_smallflower.jpg"
alt="Flowers">
</picture>
خودتان آزمایش کنید »
اندازه متن واکنشگرا
اندازه متن را می توان با یک واحد "vw" تنظیم کرد ، که به معنای "عرض دید" "viewport width" است.
به این ترتیب اندازه متن از اندازه پنجره مرورگر پیروی می کند:
سلام دنیا
برای دیدن نحوه اندازه گیری اندازه متن ، پنجره مرورگر را تغییر اندازه دهید.
Viewport اندازه پنجره مرورگر است. 1vw = 1٪ از عرض دید. اگر عرض دید 50 سانتی متر باشد ، 1vw 0.5 سانتی متر است.
درخواست های رسانه (Media Queries)
علاوه بر تغییر اندازه متن و تصاویر ، استفاده از درخواست های رسانه ای در صفحات وب واکنشگرا نیز معمول است.
با درخواست های رسانه ای می توانید سبک های کاملاً متفاوتی را برای اندازه های مختلف مرورگر تعریف کنید.
مثال: اندازه پنجره مرورگر را تغییر دهید تا ببینید سه المان div زیر به صورت افقی در صفحه های بزرگ نمایش داده می شوند و به صورت عمودی روی صفحه های کوچک قرار می گیرند:
مثال
<style>
.left, .right {
float: left;
width: 20%; / * عرض 20٪ است ، به طور پیش فرض * /
}
.main {
float: left;
width:
60%; / * عرض 60٪ است ، به طور پیش فرض * /
}
/* برای افزودن نقطه شکست در 800px از درخواست
رسانه استفاده کنید: */
@media screen and (max-width: 800px) {
.left,
.main, .right {
width: 100%; / * عرض 100٪ است ، هنگامی که نمای نمایش 800px یا کوچکتر است *
/
}
}
</style>
خودتان آزمایش کنید »
صفحه وب واکنشگرا - مثال کامل
یک صفحه وب واکنشگرا باید در صفحات نمایش بزرگ دسک تاپ و تلفن های همراه کوچک خوب به نظر برسد.
طراحی وب واکنشگرا - چارچوب ها Frameworks
همه چارچوب های محبوب CSS طراحی واکنشگرا را ارائه می دهند.
آنها رایگان هستند و استفاده از آنها آسان است.
استقاده از W3.CSS
W3.CSS یک چارچوب CSS مدرن است که به طور پیش فرض از طراحی دسک تاپ ، تبلت و موبایل پشتیبانی می کند.
W3.CSS کوچکتر و سریعتر از چارچوبهای CSS مشابه است.
W3.CSS به عنوان یک جایگزین با کیفیت بالا برای Bootstrap طراحی شده است.
W3.CSS به گونه ای طراحی شده است که مستقل از jQuery یا هر کتابخانه JavaScript دیگری باشد.
W3.CSS نسخه ی نمایشی
تغییر اندازه صفحه برای دیدن واکنشگرایی!
لندن
لندن پایتخت انگلیس است.
این پرجمعیت ترین شهر در انگلستان است ، با یک منطقه شهری بیش از 13 میلیون نفر.
تهران
تهران پانزدهمین شهر پرجمعیت جهان با مساحت ۷۳۰ کیلومتر مربّع است که به همراه توابع خود جمعیتی بالغ بر ۱۴ میلیون نفر دارد.
این شهر به لحاظ بزرگی بیست و هشتمین شهر دنیا است
توکیو
توکیو پایتخت ژاپن است.
این مرکز منطقه بزرگ توکیو است ، و پرجمعیت ترین منطقه شهری در جهان است.
مثال
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.farsiw3.ir/w3css/4/w3.css">
<body>
<div
class="w3-container w3-green">
<h1>نسخه نمایش w3cc</h1>
<p>این صفحه را اندازش را تغییر دهید</p>
</div>
<div
class="w3-row-padding">
<div
class="w3-third">
<h2>London</h2>
<p>لندن پایتخت انگلیس است.</p>
<p>بیشترین است
شهر پرجمعیت در انگلستان ،
با یک
منطقه شهری با بیش از 13 میلیون نفر سکنه.</p>
</div>
<div
class="w3-third">
<h2>تهران</h2>
<p>تهران پانزدهمین شهر پرجمعیت جهان با مساحت ۷۳۰ کیلومتر مربّع است که به همراه توابع خود جمعیتی
بالغ بر ۱۴ میلیون نفر دارد.
</p>
<p>این شهر به لحاظ بزرگی بیست و هشتمین شهر دنیا است
که تراکم جمعیت آن بین ده هزار و هفتصد تا بیش از یازده هزار نفر در هر کیلومتر مربع
است.</p>
</div>
<div
class="w3-third">
<h2>توکیو</h2>
<p>توکیو پایتخت ژاپن است.
</p>
<p>این مرکز منطقه بزرگ توکیو است ،
و
پرجمعیت ترین منطقه شهری در جهان است.</p>
</div>
</div>
</body>
</html>
خودتان آزمایش کنید »
برای کسب اطلاعات بیشتر در مورد W3.CSS ، آموزش W3.CSS ما را بخوانید.
Bootstrap
یکی دیگر از چارچوب های محبوب CSS ، بوت استرپ است. بوت استرپ از HTML ، CSS و jQuery برای ایجاد صفحات وب پاسخگو استفاده می کند.
مثال
<!DOCTYPE html>
<html lang="en">
<head>
<title> مثال بووت
استرپ</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div
class="jumbotron">
<h1>اولین صفحه بوت استرپ
من</h1>
</div>
<div class="row">
<div
class="col-sm-4">
...
</div>
<div
class="col-sm-4">
...
</div>
<div
class="col-sm-4">
...
</div>
</div>
</div>
</body>
</html>
خودتان آزمایش کنید »
برای کسب اطلاعات بیشتر در مورد بوت استرپ ، به آموزش بوت استرپ ما بروید.
سایت توسط چارچوب farsiw3.ir طراحی شده است.
