بررسی طراحی سایت ریسپانسیو

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

طراحی سایت ریسپانسیو باعث می شود وب سایت شما در همه دستگاه ها بدون داشتن هیچگونه بهم ریختگی نمایش داده شود.در این نوع طراحی از کدهای 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;
}
}