۱۲
آبان

جلسه ۶۳ : طراحی Responsive در CSS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. تاکنون در جلسات اخیر شما را با برخی از ویژگی های پرکاربرد در طراحی Responsive از جمله flex و Media Querie ها آشنا کردیم. با استفاده از این ویژگی ها تقریبا دانش ایجاد صفحات انعطاف پذیر وب سایت ها را در اختیار دارید، با این حال در این فصل ما شما را به طور کامل با روال و ساختارهای طراحی Responsive آشنا می کنیم تا با داشتن اطلاعات کامل و کافی بتوانید قالب های Responsive کامل و جامعی را ایجاد کنید، که در تمام صفحه نمایش های مختلف به خصوص موبایل و تب لت ها به خوبی نمایش داده شود، در این مبحث ابتدا شما را با مفاهیم اولیه طراحی Responsive در CSS آشنا می کنیم.

طراحی Responsive در CSS

این جلسه در واقع مقدمه ای بر مباحث طراحی Responsive در CSS در این فصل می باشد.

طراحی وب Responsive چیست

طراحی وب Responsive صفحات وب شما را برای نمایش بهتر در تمام دستگاه ها آماده می کند.
طراحی وب Responsive فقط برای html و css کاربرد دارد.
طراحی وب Responsive یک برنامه یا کدهای JavaScript نیست.

کاربرد اصلی طراحی Responsive در CSS

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

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

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

طراحی Responsive در CSS

شکل فوق عملکرد کلی Responsive در صفحات وب را نشان می دهد، حالتی که با مخفی کردن / نمایش دادن ، تغییر اندازه ، جایگزین کردن و اضافه کردن کدهای html و css صفحات وب را با دستگاه های مختلف سازگار کرده و آن ها را به خوبی نمایش می دهد.

در ادامه به یک مثال از یک قالب ساده ی رسپانسیو شده اشاره می کنیم:

مثال : یک نمونه از طراحی رسپانس

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

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

[class*="col-"] {
  float: left;
  padding: 15px;
}

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

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[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%;}
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="col-6 col-s-9">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  </div>

  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>What?</h2>
      <p>Chania is a city on the island of Crete.</p>
      <h2>Where?</h2>
      <p>Crete is a Greek island in the Mediterranean Sea.</p>
      <h2>How?</h2>
      <p>You can reach Chania airport from all over Europe.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

<!DOCTYPE html>

<html>

<head>

<style>

* {

box-sizing: border-box;

}

.row::after {

content: "";

clear: both;

display: table;

}

[class*="col-"] {

float: left;

padding: 15px;

}

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;

}

.aside {

background-color: #33b5e5;

padding: 15px;

color: #ffffff;

text-align: center;

font-size: 14px;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.footer {

background-color: #0099cc;

color: #ffffff;

text-align: center;

font-size: 12px;

padding: 15px;

}

/* For mobile phones: */

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

}

</style>

</head>

<body>

<h1>Chania</h1>

</div>

<ul>

<li>The Flight</li>

<li>The Island</li>

</ul>

</div>

<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>

</div>

<p>Chania is a city on the island of Crete.</p>

<h2>Where?</h2>

<p>Crete is a Greek island in the Mediterranean Sea.</p>

<p>You can reach Chania airport from all over Europe.</p>

</div>

<p>Resize the browser window to see how the content respond to the resizing.</p>

</div>

</body>

</html>

خودتان امتحان کنید »

نتیجه ی کد فوق :

قالب رسپانسیو

کلام آخر

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

به اشتراک بگذارید

طراحی واکنشگرا در CSS

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

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۶۳ : طراحی Responsive در CSS

مقدمه

طراحی Responsive در CSS

طراحی وب Responsive چیست

کاربرد اصلی طراحی Responsive در CSS

کلام آخر

لیست مطالب دوره

آموزش های پیشرفته CSS

گریدبندی در css

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ