‎‎طراحي وب سايت واكنشگراHTML Responsive Web Design -‎

Previous > <Next

‎طراحي وب واكنشگرا براي ايجاد وبي است كه در همه دستگاهها خوب به نظر آيد. ‎يك وب سايت واكنشگرا براي تنظيم خودكار صفحات مختلف نمايش ونماي ديد مناسب بايد طراحي شود.

‎تصوير زير نمونه اي از دستگاههاي مختلف با صفحه نمايش متفاوت كه بايد يك طراحي واكنشگراي ‎وب روي آنها نمايش مطلوبي داشته باشد.

‎‎طراحي وب واكنشگرا چيست

‎در طراحي وب سايت واكنشگرااستفاده ازHTML وCSS ،براي تغيير خودكار اندازه ها ، مخفي نمودن ‎كوچك يابزرگ نمائي يك وب سايت در دستگاههاي(لب تاپ، تبلت ،موبايل و...) مختلف براي نمايش ‎مطلوب وزيباست .باين نمونه توجه كنيد

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}
.menu {
  float: left;
  width: 20%;
}
.menuitem {
  padding: 8px;
  margin-top: 7px;
  border-bottom: 1px solid #f1f1f1;
}
.main {
  float: left;
  width: 60%;
  padding: 0 20px;
  overflow: hidden;
}
.right {
  background-color: lightblue;
  float: left;
  width: 20%;
  padding: 10px 15px;
  margin-top: 7px;
}

@media only screen and (max-width:800px) {
  /* For tablets: */
  .main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}
@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
}
</style>
</head>
<body style="font-family:Verdana;">

<div style="background-color:#f1f1f1;padding:15px;">
  <h1>Cinque Terre</h1>
  <h3>Resize the browser window</h3>
</div>

<div style="overflow:auto">
  <div class="menu">
    <div class="menuitem">The Walk</div>
    <div class="menuitem">Transport</div>
    <div class="menuitem">History</div>
    <div class="menuitem">Gallery</div>
  </div>

<div class="main">
    <h2>The Walk</h2>
    <p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
    <img src="img_5terre.jpg" style="width:100%">
  </div>

<div class="right">
    <h2>What?</h2>
    <p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
    <h2>Where?</h2>
    <p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
    <h2>Price?</h2>
    <p>The Walk is free!</p>
  </div>
</div>

<div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Setting the Viewport</h2>
<p>This example does not really do anything, other than showing you how to add the viewport meta element.</p>

</body>
</html>

--(go to editor for change code and run)

‎‎تنظيم نماي ديدSetting The Viewpoint -‎ .

‎براي تنظيم نماي ديد در دستگاههاي مختلف ازتگ‎<meta>‎ با ويژگي هاي مرتبط ‎مطابق زير استفاده مي نمائيم.

‎

<meta name="viewport" content="width=device-width, initial-scale=1.0">

‎بااين كارنماي صفحه شماتنظيم ميگردد .اين دستور براي مرورگر نحوي كنترل ابعاد ومقياس صفحه را ‎ارائه مي نمايد.

‎‎مثال ـ تنظيم نماي ديد

‎براي واضح شدن مطلب در زير دونمونه بدون تنظيم نماي ديد وبا تنظيم نما آمده تا اثر دستور ‎بهتر مشخص شود.

Without the viewport meta tag:

With the viewport meta tag:

‎

‎نكته ـ اگراين صفحه را با گوشي يا تبلت مرور ميكنيد، ميتوانيد روي دو پيوند بالا كليك نمائيد ‎وتفاوت آن دو را در نـماي ديد به بينيد.

‎‎تصاوير واكنشگراResponsive Images -‎

‎تصاوير واكنشگرا، تصاويري هستند كه به خوبي براي هر اندازه اي توسط مرورگر تنظيم ابعاد ميشوند ‎درصورتيكه ابعاد تصوير دقيق وغير قابل تغيير باشد، واكنشگرا نبوده ونماي مناسبي در دستگاههاي ‎مختلف نمايشي ندارد.

‎‎ويژگي عرضUsing the width Property -‎

‎براي رفع مشكل از ويژگي‎width‎ استفاده كرده ومقدار آنرا براي تصوير %100تنظيم ‎‎مي نمائيم .دراي حالت تصوير واكنشگرا بوده ومقياسش بالا وپائين ميرود.

‎‎مثال ـ تصوير واكنشگرا

‎

<img src="img_girl.jpg" style="width:100%;">

‎توجه داشته باشيد كه در مثال بالا ممكن است تصوير از اندازه اصلي خودش هم بزرگتر شود .بهتر ‎اينست كه محدويتي براي بزرگي آن گذاشته شود .براي اينكار ميتوان از ويژگي ‎max-‎width‎‎استفاده كرد .

‎‎حداكثر اندازهUsing the max-‎width Property -‎

‎اگر ويژگي‎max-‎width‎ با مقدار%100 ‎تنظيم شود، تصوير كوچكتر ميشود اما بزرگتر از انداره اصليش نميگردد.

‎‎مثال ـ تنظيم حداكثر اندازه تصوير

‎

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

‎Show Diferent Images Depending on Browser Width‎

‎‎نمايش تصاويرمختلف بسته به عرض مرورگر

‎عنصرHTML ‎<picture>‎ اجازه ميدهد كه شما تصويري تعريف نمائيد كه با اندازه ‎مرورگر تناسب داشته باشد .با استفاده از عنصر‎<source>‎ تصوير براي اندازه ‎حد اكثري مرورگر تعريف ميگردد .عنصر فوق در داخل‎<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_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

‎عملكرد اين روش را با لينك اين پيوند click ‎بهتر ميتوانيد درك نمائيد.

‎‎متن واكنشگراResponsive Text size -‎

‎،براي اينكه متني باندازه فونتش در مقابل تغيير انداز پنجره مرورگر واكنش نشان دهد وتغيير كند ‎بايد واحد فونتvm تعريف شود .

‎

‎‎نكتهvm -‎ مخفف viewport width است

‎‎مثال ـ متن واكنشگرا

‎

<h1style="font-size:10vw;">Responsive Text</h1>

‎

‎نماي ديد مرورگر اندازه پنجره آنست .مقدارvm=1 يعني يك صدم اندازه پنجره .پس اگر نماي ديد ‎ 50‎سانتي متر عرض داشته باشد اندازه فونت نيم سانتي متراست.

‎‎مدياكوئريMedia Queries -‎

‎علاوه بر تغيير اندازه در متن وتصوير براي واكنشگرائي وب با مديا كوئري ها هم ميتوان اقدام ‎اقدام نمود .با مديا كوري ميتوان براي تغيير اندازه مرورگر استايل شيت خاص متناسب وواكنشگرا ‎تعريف نمود .يعني عناصري از صفحه در هنگام تغييراندازه صفحه مرورگر متناسباتغيير وضعيت مطلوب ‎ميدهند.

‎بعنوان نمونه سه بخش ستونيleft mene , Main content , right content را در نظر بگيريد .اين ‎سه بامحتوا بصورت پيش فرض در يك رديف قرار دارند.

‎left menu

‎Main cntent

‎Right content

‎حال اگر پنجره مرورگر كوچك شود اين سه بخش بصورت پشته در يك ستون قرار ميگيرند .عامل تغيير ‎در استايل شيت دستور‎@media ‎ ميباشد .

‎‎مثال ـ نمونه مديا كوئري

‎

<style>* {
  box-sizing: border-box;
}

.left {
  background-color: #2196F3;
  padding: 20px;
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  background-color: #f1f1f1;
  padding: 20px;
  float: left;
  width: 60%; /* The width is 60%, by default */
}

.right {
  background-color: #04AA6D;
  padding: 20px;
  float: left;
  width: 20%; /* The width is 20%, by default */
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>

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

.left {
  background-color: #2196F3;
  padding: 20px;
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  background-color: #f1f1f1;
  padding: 20px;
  float: left;
  width: 60%; /* The width is 60%, by default */
}

.right {
  background-color: #04AA6D;
  padding: 20px;
  float: left;
  width: 20%; /* The width is 20%, by default */
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>
</head>
<body>

<h2>Media Queries</h2>
<p>Resize the browser window.</p>

<p>Make sure you reach the breakpoint at 800px when resizing this frame.</p>

<div class="main">
  <p>Main Content</p>
</div>

<div class="right">
  <p>Right Content</p>
</div>

</body>
</html>

--(go to editor for change code and run)

‎‎مثال ـ نمونه كامل وب واكنشگرا كه در صفحات بزرگ.و كوچك خوب نمايش ميشود.

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

.menu {
  float: left;
  width: 20%;
  text-align: center;
}

.menu a {
  background-color: #e5e5e5;
  padding: 8px;
  margin-top: 7px;
  display: block;
  width: 100%;
  color: black;
}

.main {
  float: left;
  width: 60%;
  padding: 0 20px;
}

.right {
  background-color: #e5e5e5;
  float: left;
  width: 20%;
  padding: 15px;
  margin-top: 7px;
  text-align: center;
}

@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
}
</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">

<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
  <h1>Hello World</h1>
</div>

<div class="main">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

<div class="right">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  </div>
</div>

</body>
</html>

--(go to editor for change code and run)

Previous > <Next

‎‎طراحي وب سايت واكنشگراHTML Responsive Web Design -‎

‎‎طراحي وب واكنشگرا چيست

--(go to editor for change code and run)

‎‎تنظيم نماي ديدSetting The Viewpoint -‎ .

--(go to editor for change code and run)

‎‎تصاوير واكنشگراResponsive Images -‎

‎‎ويژگي عرضUsing the width Property -‎

--(go to editor for change code and run)

‎‎حداكثر اندازهUsing the max-‎width Property -‎

--(go to editor for change code and run)

‎Show Diferent Images Depending on Browser Width‎

‎‎نمايش تصاويرمختلف بسته به عرض مرورگر

--(go to editor for change code and run)

‎‎متن واكنشگراResponsive Text size -‎

--(go to editor for change code and run)

‎‎مدياكوئريMedia Queries -‎

‎left menu

‎Main cntent

‎Right content

--(go to editor for change code and run)

--(go to editor for change code and run)

HTML tutorial آموزش اچ تی ام ال

HTML Forms فرمهای اچ تی ام ال

HTML Graphicsگرافیک اچ تی ام ال

HTML Media رسانه

HTML APIs

HTML References

Sitemap Protocol