یک فنجان مشاوره
مهـمـان مــا باشیـد

شـمـــاره تــمــاس
031-36628509

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

انتشار 03 دی 1398
دیدگاه ها 0
زمان تقریبی مطالعه
گردآوری پدیده تجارت

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

طراحی سایت ریسپانسیو باعث می شود وب سایت شما در همه دستگاه ها بدون داشتن هیچگونه بهم ریختگی نمایش داده شود.در این نوع طراحی از کدهای HTML و CSSاستفاده می کند.

طراحی ریسپانسیو , طراحی بهترین تجربه برای همه کاربران:

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

بیایید شروع به ایجاد یک شبکه نمایشگر ریسپانسیو کنیم:

بسیاری از صفحات وب مبتنی بر یک شبکه هستند ، به این معنی که صفحه به ستون ها تقسیم می شود. استفاده از grid view هنگام طراحی صفحات وب بسیار مفید است و قرار دادن عناصر در صفحه را آسانتر می کند.

یک شبکه نمایشگر  ریسپانسیو معمولاً دارای 12 ستون است ، و 100٪ عرض دارد و با تغییر اندازه پنجره مرورگر ، کوچک میشود و گسترش مییابد.

ابتدا اطمینان حاصل کنید که box-sizing همه عناصر HTML دارای ویژگی border-box باشند. این امر باعث می شود که pading و margin در عرض و ارتفاع کل عناصر درج شوند.

کد زیر را در CSS خود اضافه کنید:

*{
box-sizing: border-box;
}

:مثال زیر یک صفحه وب پاسخگو ساده و دارای دو ستون را نشان می دهد

.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}

 

مثال بالا درصورتی خوب است که صفحه وب فقط شامل دو ستون باشد.

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

ابتدا باید درصد را برای یک ستون محاسبه کنیم:

8.33٪=12 ستون / %100

سپس برای هر یک از 12 ستون ، یک کلاس ایجاد می کنیم ، ”- class=”colو یک عدد را مشخص می کنیم که چند ستون باید از طول ستون باشد:

.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%;}

 

تمام این ستون ها باید دارای float:left و دارای یک padding:15 px باشند:

["class*="col] {
float:left;
padding: 15px;
border: 1px solid red;
}

 

هر سطر باید در یک  <div> قرارداده شود. تعداد ستون های داخل یک ردیف همیشه باید تا 12 اضافه شود:

<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>

 

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

.row::after {
content: "";
clear: both;
display: table;
}

 

ما همچنین می خواهیم برخی از سبک ها و رنگ ها را برای بهتر جلوه دادن آن اضافه کنیم:

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;
}

media query چیست؟

media query یک تکنیک CSS است که در CSS3 معرفی شده است.این قانون از قانونmedia استفاده می کند تا یک بلوک از خصوصیات CSS را درشرایط خاص نیز اجرا کند.

مثال:

اگر پنجره مرورگر 600 پیکسل یا کوچکتر باشد ، رنگ پس زمینه روشن خواهد شد:

@media only screen and (max-width: 600px) {

body {

background-color: lightblue;

}

}

 

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

مثال:

هنگامی که صفحه نمایش (پنجره مرورگر) از 768px کوچکتر می شود ، هر ستون باید 100٪ عرض داشته باشد:

/* 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%;}

@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}

همیشه در ابتدا برای موبایل طراحی کنید:

Mobile First به معنای طراحی تلفن همراه ،قبل از طراحی رومیزی یا هر وسیله دیگر (این باعث می شود صفحه سریعتر در دستگاه های کوچکتر نمایش داده شود). این بدان معنی است که ما باید در CSS خود تغییراتی ایجاد کنیم.

به جای تغییر استایل ها وقتی عرض از 768px کوچکتر شود ، باید از زمانی که عرض از  768px بزرگتر شود ، طرح را تغییر دهیم. این باعث می شود طرح اول ما موبایل باشد:

/* For mobile phones: */
[class*="col-"] {
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%;}
}

 

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

ما همچنین می خواهیم یک نقطه شکاف بین دسکتاپ و تبلت ها و تلفن های همراه قرار دهیم که این کار را با اضافه کردن یک media query دیگر (با سرعت 600 پیکسل) و مجموعه ای از کلاس های جدید برای دستگاه های بزرگتر از 600px (اما کوچکتر از 768px) انجام می دهیم:

توجه داشته باشید که دو مجموعه کلاس تقریباً یکسان هستند ، تنها تفاوت آن در نام ( -col و col-s) است:

/* برای تلفن های همراه: */

[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%;}
}

 

ممکن است عجیب به نظر برسد که ما دو مجموعه کلاس یکسان داریم ، اما این امکان را به ما می دهد تا در HTML ، تصمیم بگیریم که با ستون ها در هر نقطه شکست (breakpoint) چه اتفاقی می افتد:

برای دسکتاپ:

بخش اول و سوم هر دو 3 ستون هر کدام را شامل می شوند. بخش میانی 6 ستون خواهد بود.

برای (تبلت ها):

بخش اول شامل 3 ستون ، بخش دوم 9 و بخش سوم در زیر دو بخش اول نمایش داده می شود و 12 ستون را شامل می شود:

<div class="row">
<div class="col-3 col-s-3">...</div>
<div class="col-6 col-s-9">...</div>
<div class="col-3 col-s-12">...</div>
</div>

نقاط ضعف دستگاه های معمولی:

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

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

 

بسته به جهت گیری مرورگر می توانید از نمایش media query نیز استفاده کنید.

به عنوان مثال:

اگر جهت در حالت افقی باشد ، صفحه وب دارای پس زمینه نور خواهد بود:

@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}

 

گاهی اوقات میخواهیم بعضی مواقع و در حالتی خاص بعضی از عناصر را پنهان کنیم . به عنوان مثال:

/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}

مثالی دیگر:

اندازه قلم را با نمایش داده های رسانه تغییر دهید:

همچنین می توانید از media برای تغییر اندازه قلم یک عنصر در اندازه های مختلف صفحه استفاده کنید:

/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}

 

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

آینده از آن کسب و کارهای آنلاین است…

مقالات مرتبط

شاید علاقمند به دیدن این مقالات نیز باشید
(آرشیو کامل)

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

پدیده تجارت

30 شهریور 1396

صفر تا صد شروع کسب و کار آنلاین صفر تا صد شروع کسب و کار آنلاین مقالات برندینگ

پدیده تجارت

04 آبان 1398

آموزش بازاریابی در اینستاگرام آموزش بازاریابی در اینستاگرام مقالات تجارت الکترونیک

پدیده تجارت

27 خرداد 1399

طراحی اپلیکیشن بازیافت آنلاین طراحی اپلیکیشن بازیافت آنلاین مقالات تجارت الکترونیک

پدیده تجارت

23 اسفند 1400

ذخیره سازی اشیا ( Object Storage ) چیست؟ ذخیره سازی اشیا ( Object Storage ) چیست؟ مقالات طراحی وب سایت

پدیده تجارت

23 اسفند 1400

مزایای طراحی سایت با فریمورک لاراول چیست؟ مزایای طراحی سایت با فریمورک لاراول چیست؟ مقالات طراحی وب سایت

پدیده تجارت

21 آذر 1397

جدیدترین تکنولوژی های طراحی سایت جدیدترین تکنولوژی های طراحی سایت مقالات طراحی وب سایت

پدیده تجارت

12 مهر 1396

آموزشهای برنامه نویسی اندروید در اصفهان آموزشهای برنامه نویسی اندروید در اصفهان مقالات طراحی وب سایت

پدیده تجارت

20 آذر 1396

صفر تا صد راه اندازی استارت آپ در اصفهان صفر تا صد راه اندازی استارت آپ در اصفهان مقالات تجارت الکترونیک

پدیده تجارت

24 اسفند 1400

مشاوره کسب و کار چیست و چرا به آن نیاز دارید؟ مشاوره کسب و کار چیست و چرا به آن نیاز دارید؟ مقالات تجارت الکترونیک

پدیده تجارت

21 فروردین 1401

طراحی بازی اندروید با بازی ساز Unity طراحی بازی اندروید با بازی ساز Unity مقالات تجارت الکترونیک

پدیده تجارت

01 اردیبهشت 1397

مراحل طراحی یک فروشگاه اینترنتی موفق مراحل طراحی یک فروشگاه اینترنتی موفق مقالات طراحی وب سایت

پدیده تجارت

14 مهر 1398

دیدگاه کاربران

0

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها