ریسپانسیو چیست؟ آیا باید سایت ریسپانسیو باشد؟-جلسه 5

فیلم آموزشی ریسپانسیو

لینک ویدیویی آموزشی ریسپانسیو

https://www.namasha.com/v/dbEpOGgZ

ریسپانسیو چیست ؟

ریسپانسیو روشی در طراحی وب است که به صفحات وب اجازه می دهد تا در انواع دستگاه ها و اندازه های صفحه نمایش به خوبی نمایش داده شوند.

فهرست مطالب

طراحی ریسپانسیو چیست؟

طراحی responsive از ترکیبی از تصاویر، شبکه‌ها و طرح‌بندی‌های انعطاف‌پذیر با CSS منطقی و هوشمند استفاده می‌کند.

در این صورت با تغییر محیط کاربری از لپ تاپ به تلفن هوشمند، وب سایت با سرعت اندازه و وضوح صفحه نمایش و همچنین میزان پشتیبانی دستگاه متصل به اسکریپت های مختلف سازگاری خواهد داشت.

طبیعتاً فناوری مورد نیاز برای پاسخگویی خودکار به درخواست کاربر باید در سایت و مرورگر کاربر وجود داشته باشد. در نهایت این روش نیازمند طراحی و توسعه دستگاه های مختلفی است که در بازار وجود دارد و در آینده ارائه خواهد شد.

ریسپانسیو با css

صفحات وب ریسپانسیو را به زیبایی در تمامی دستگاه ها (موبایل، لپ تاپ، تبلت و غیره) نمایش می دهد. شاید در ابتدا پیچیده به نظر برسد، اما ما فقط به HTML و CSS برای طراحی ریسپانسیو نیاز داریم! بنابراین نیازی به برنامه یا زبان خاصی مانند جاوا اسکریپت ندارید.

در واقع در طراحی ریسپانسیو نباید اطلاعات را حذف کرد تا در صفحات کوچک قرار بگیرد، بلکه باید آن را تغییر داد تا در صفحه قرار بگیرد.

در روزهای اولیه طراحی وب، صفحات وب در اندازه های بسیار بزرگ ساخته می شدند.

ادامه مطلب آموزش استفاده از تگ image

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

اگر کاربر صفحه نمایشی بزرگتر یا کوچکتر از صفحه طراحی شده توسط توسعه دهنده داشته باشد، صفحه وب دارای نوارهای پیمایش یا اسکرول های آزاردهنده است و خطوط بسیار طولانی و فضا ضعیف است.

ادامه مطلب جدا سازی تگهای ساختار html5 در فایلهای جداگانه - جلسه 4

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

viewport چیست؟

Viewport ناحیه قابل مشاهده کاربر از یک صفحه وب است.

بسته به دستگاه مختلف Viewport متفاوت است و در تلفن همراه کوچکتر از صفحه نمایش رایانه خواهد بود.

قبل از تبلت ها و تلفن های همراه، صفحات وب فقط برای صفحه نمایش کامپیوتر طراحی می شدند و معمول بود که صفحات وب دارای طراحی ثابت و اندازه ثابت باشند.

سپس، وقتی شروع به گشت و گذار در اینترنت با استفاده از تبلت ها و تلفن های همراه کردیم، صفحات وب با اندازه ثابت بیش از حد بزرگ بودند که با Viewportمناسب نبودند. برای رفع این مشکل، مرورگرهای آن دستگاه‌ها کل صفحه وب را برای تناسب با صفحه کوچک می‌کنند.

HTML5 روشی را معرفی کرد که به طراحان وب اجازه می دهد از طریق تگ <meta> کنترل نمای پورت را در دست بگیرند.

شما باید عنصر meta> viewport> زیر را در تمام صفحات وب خود قرار دهید:

نمایش کپی در حافظه

نحوه استفاده از متا تگ viewport

برای اضافه کردن viewport از تگ meta در head استفاده می کنیم

نمایش کپی در حافظه

حداقل و حداکثر اندازه ها در ریسپانسیو

براساس دستگاه های مختلف اندازه های مشخص و استانداردی و جود دارکه آنها را باید در css مقدار دهی کرد وباتوجه به دستگاه هی که استفاده می شود قالب بندی را مشخص کرد.

دستگاه های بسیار کوچک (تلفن های عمودی، کمتر از 576 پیکسل)

نمایش کپی در حافظه

دستگاه های کوچک (تلفن های افقی، 576 پیکسل و بالاتر)

نمایش کپی در حافظه

دستگاه های متوسط (تبلت، 768 پیکسل و بالاتر)

نمایش کپی در حافظه

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://seokan.ir/language-php/" target="_blank" rel="nofollow" class="IRPP_minimalist"><style> .IRPP_minimalist { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#ECF0F1; border:0!important; border-left:4px solid #7F8C8D!important; text-decoration:none; } .IRPP_minimalist:active, .IRPP_minimalist:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .IRPP_minimalist { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .IRPP_minimalist .ctaText { font-weight:bold; color:#16A085; text-decoration:none; font-size: 16px;float:left; } .IRPP_minimalist .postTitle { color:#34495E; text-decoration: underline!important; font-size: 16px; } .IRPP_minimalist:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">ادامه مطلب</span>  <span class="postTitle">php چیست و چه کاربرد کارد - سئوکان</span></div></a><div style="width:100%; text-align:left; font-weight:normal;"><div style="font-size:10px;"><span class="poweredByText">قدرت گرفته از</span> <a rel="nofollow" style="font-weight:bold;" href="https://mihannevis.com/inline-related-posts" target="_blank">افزونه نوشته‌های مرتبط هوشمند</a></div></div><div style="clear:both"></div></div>

دستگاه های بزرگ (رایانه رومیزی، 992 پیکسل و بالاتر)

نمایش کپی در حافظه

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://seokan.ir/link-building/" target="_blank" rel="nofollow" class="IRPP_minimalist"><style> .IRPP_minimalist { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#ECF0F1; border:0!important; border-left:4px solid #7F8C8D!important; text-decoration:none; } .IRPP_minimalist:active, .IRPP_minimalist:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .IRPP_minimalist { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .IRPP_minimalist .ctaText { font-weight:bold; color:#16A085; text-decoration:none; font-size: 16px;float:left; } .IRPP_minimalist .postTitle { color:#34495E; text-decoration: underline!important; font-size: 16px; } .IRPP_minimalist:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">ادامه مطلب</span>  <span class="postTitle">راهنمای لینک سازی برای مبتدیان➰سئوکان</span></div></a><div style="width:100%; text-align:left; font-weight:normal;"><div style="font-size:10px;"><span class="poweredByText">قدرت گرفته از</span> <a rel="nofollow" style="font-weight:bold;" href="https://mihannevis.com/inline-related-posts" target="_blank">افزونه نوشته‌های مرتبط هوشمند</a></div></div><div style="clear:both"></div></div>

دستگاه های بسیار بزرگ (رایانه های رومیزی بزرگ، 1200 پیکسل و بالاتر)

نمایش کپی در حافظه

اضافه کردن اندازه های ریسپانسیو به فایل css

نمایش کپی در حافظه

body{
	background:gray;
}
.continer{
	direction:rtl;
    display: flex;
     justify-content: right;
	 width:100%;
	 margin:10px 0 10px;
}
a{text-decoration: none;}

.center{text-align: center;margin: auto}

.menu{background: white;}

.menu>ul>li{list-style: none;display: inline-block;font-size: 25px;margin-right: 20px;}
.menu a{color: black}
.logSit{background: white}
.col-1{width:7.3333%;margin:1px 0.0416% 1px 0.0416% }
.col-2{width:15.6666% ;margin:1px 0.5% 1px 0.5%;}
.col-3{width:24% ;margin:1px 0.5% 1px 0.5%;}
.col-4{width:32.3333% ;margin:1px 0.5% 1px 0.5%;}
.col-5{width:40.6666% ;margin:1px 0.5% 1px 0.5%;}
.col-6{width:49% ;margin:1px 0.5% 1px 0.5%;}
.col-7{width:57.3333% ;margin:1px 0.5% 1px 0.5%;}
.col-8{width:65.6666% ;margin:1px 0.5% 1px 0.5%;}
.col-9{width:74% ;margin:1px 0.5% 1px 0.5%;}
.col-10{width:82.3333%;margin:1px 0.5% 1px 0.5%;}
.col-11{width:90.6666% ;margin:1px 0.5% 1px 0.5%;}
.col-12{width:99% ;margin:1px 0.5% 1px 0.5%;}
 /*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
	body{
		background: #ff253a;
	}
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
	body{
		background:aqua;
	}
	
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
	body{
		background:blueviolet;
	}
}
 /*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
	body{
		background:black;
	}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	body{
		background:chocolate;
	}
	
}

اضافه کردن کول بندی به فایل css

اینک نوبت به اضافه کردن ستون بندی مربوط به هر اندازه ریسپانسیو با کلاس های متفاوت می باشد.

پس در فایل css اکسترنالی که قبلا ایجاد کرده ایم کدهای زیر را جایگزین و فایل را مجدد سیو می کنیم.

نمایش کپی در حافظه

body{
	background:gray;
}
.continer{
	direction:rtl;
	width:100%;
	margin:10px 0 10px;
	display: inline-block;
}
#asiRig{background: white}
a{text-decoration: none;}
.center{text-align: center;margin: auto}
.logSit{background: white}
.col-1{width:7.3333%;margin:1px 0.0416% 1px 0.0416%;float: right;}
.col-2{width:15.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
.col-3{width:24% ;margin:1px 0.5% 1px 0.5%;float: right;}
.col-4{width:32.3333% ;margin:1px 0.5% 1px 0.5%;float: right;}
.col-5{width:40.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
.col-6{width:49% ;margin:1px 0.5% 1px 0.5%;float: right;}
.col-7{width:57.3333% ;margin:1px 0.5% 1px 0.5%;float: right;}
.col-8{width:65.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
.col-9{width:74% ;margin:1px 0.5% 1px 0.5%;float: right;}
.col-10{width:82.3333%;margin:1px 0.5% 1px 0.5%;float: right;}
.col-11{width:90.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
.col-12{width:99% ;margin:1px 0.5% 1px 0.5%;float: right;}
/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
	body{
		background: #ff253a;
	}
	.col-xs-1{width:7.3333%;margin:1px 0.0416% 1px 0.0416%;float: right;}
	.col-xs-2{width:15.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xs-3{width:24% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xs-4{width:32.3333% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xs-5{width:40.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xs-6{width:49% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xs-7{width:57.3333% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xs-8{width:65.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xs-9{width:74% ;margin:1px 0.5% 1px 0.5%;}
	.col-xs-10{width:82.3333%;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xs-11{width:90.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xs-12{width:99% ;margin:1px 0.5% 1px 0.5%;float: right;}
}
/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
	body{
		background:aqua;
	}
	.continer{
		direction:rtl;
		display:inline-block;
		width:100%;
		margin:10px 0 10px;
	}
	.col-sm-1{width:7.3333%;margin:1px 0.0416% 1px 0.0416%;float: right;}
	.col-sm-2{width:15.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-sm-3{width:24% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-sm-4{width:32.3333% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-sm-5{width:40.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-sm-6{width:49% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-sm-7{width:57.3333% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-sm-8{width:65.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-sm-9{width:74% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-sm-10{width:82.3333%;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-sm-11{width:90.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-sm-12{width:99% ;margin:1px 0.5% 1px 0.5%; float: right;}
}
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
	body{
		background:blueviolet;
	}
	.col-md-1{width:7.3333%;margin:1px 0.0416% 1px 0.0416%;float: right; }
	.col-md-2{width:15.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-md-3{width:24% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-md-4{width:32.3333% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-md-5{width:40.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-md-6{width:49% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-md-7{width:57.3333% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-md-8{width:65.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-md-9{width:74% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-md-10{width:82.3333%;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-md-11{width:90.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-md-12{width:99% ;margin:1px 0.5% 1px 0.5%;float: right;}
}
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
	body{
		background:black;
	}
	.col-lg-1{width:7.3333%;margin:1px 0.0416% 1px 0.0416%;float: right;}
	.col-lg-2{width:15.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-lg-3{width:24% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-lg-4{width:32.3333% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-lg-5{width:40.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-lg-6{width:49% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-lg-7{width:57.3333% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-lg-8{width:65.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-lg-9{width:74% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-lg-10{width:82.3333%;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-lg-11{width:90.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-lg-12{width:99% ;margin:1px 0.5% 1px 0.5%;float: right;}
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	body{
		background:chocolate;
	}
	.col-xl-1{width:7.3333%;margin:1px 0.0416% 1px 0.0416%;float: right;}
	.col-xl-2{width:15.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xl-3{width:24% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xl-4{width:32.3333% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xl-5{width:40.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xl-6{width:49% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xl-7{width:57.3333% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xl-8{width:65.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xl-9{width:74% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xl-10{width:82.3333%;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xl-11{width:90.6666% ;margin:1px 0.5% 1px 0.5%;float: right;}
	.col-xl-12{width:99% ;margin:1px 0.5% 1px 0.5%;float: right;}
}

یک دیدگاه

آموزش کامل تگ header در html – جلسه 7 - سئوکان دسامبر 5, 2022 در 7:07 ب.ظ - پاسخ

[…] باید با استفاده از کول بندی های css اکسترنال اندازه هر جایگاه (لوگو-سرچ-منو-رسانه های اجتماعی) را […]

ریسپانسیو چیست؟ آیا باید سایت ریسپانسیو باشد؟-جلسه 5

فیلم آموزشی ریسپانسیو

لینک ویدیویی آموزشی ریسپانسیو

ریسپانسیو چیست ؟

طراحی ریسپانسیو چیست؟

ریسپانسیو با css

viewport چیست؟

نحوه استفاده از متا تگ viewport

حداقل و حداکثر اندازه ها در ریسپانسیو

دستگاه های بسیار کوچک (تلفن های عمودی، کمتر از 576 پیکسل)

دستگاه های کوچک (تلفن های افقی، 576 پیکسل و بالاتر)

دستگاه های متوسط (تبلت، 768 پیکسل و بالاتر)

دستگاه های بزرگ (رایانه رومیزی، 992 پیکسل و بالاتر)

دستگاه های بسیار بزرگ (رایانه های رومیزی بزرگ، 1200 پیکسل و بالاتر)

اضافه کردن اندازه های ریسپانسیو به فایل css

اضافه کردن کول بندی به فایل css

آموزش ساخت فرم ثبت‌ نام با PHP- سئوکان

آموزش ساخت جدول در php – سئوکان

آموزش اتصال به دیتابیس با PDO – سئوکان

تفاوت get و post – سئوکان

یک دیدگاه

ارسال دیدگاه لغو پاسخ

عنوان

ریسپانسیو چیست؟ آیا باید سایت ریسپانسیو باشد؟-جلسه 5

فیلم آموزشی ریسپانسیو

لینک ویدیویی آموزشی ریسپانسیو

ریسپانسیو چیست ؟

طراحی ریسپانسیو چیست؟

ریسپانسیو با css

viewport چیست؟

نحوه استفاده از متا تگ viewport

حداقل و حداکثر اندازه ها در ریسپانسیو

دستگاه های بسیار کوچک (تلفن های عمودی، کمتر از 576 پیکسل)

دستگاه های کوچک (تلفن های افقی، 576 پیکسل و بالاتر)

دستگاه های متوسط ​​(تبلت، 768 پیکسل و بالاتر)

دستگاه های بزرگ (رایانه رومیزی، 992 پیکسل و بالاتر)

دستگاه های بسیار بزرگ (رایانه های رومیزی بزرگ، 1200 پیکسل و بالاتر)

اضافه کردن اندازه های ریسپانسیو به فایل css

اضافه کردن کول بندی به فایل css

مطالب مرتبط

آموزش ساخت فرم ثبت‌ نام با PHP- سئوکان

آموزش ساخت جدول در php – سئوکان

آموزش اتصال به دیتابیس با PDO – سئوکان

تفاوت get و post – سئوکان

یک دیدگاه

ارسال دیدگاه لغو پاسخ

عنوان

دستگاه های متوسط (تبلت، 768 پیکسل و بالاتر)