۱۹
خرداد

جلسه ۰۳ : آموزش طراحی ریسپانسیو در Pure CSS

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

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

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و آن دسته از کاربرانی که علاقمند به دوره آموزش Pure CSS هستند. در این جلسه گذشته آموختیم که چگونه به نصب Pure CSS بپردازیم. در این جلسه و در ادامه این دوره آموزش طراحی ریسپانسیو در Pure CSS را به علاقمندان این دوره ارائه می نماییم.

آموزش طراحی ریسپانسیو در Pure CSS

Pure.CSS دارای چند کلاس ویژه برای ایجاد یک طراحی ریسپانسیو است.

شماره کلاس
۱	container را برای اشغال فضای مورد نیاز در هر دستگاه تنظیم می کند.
۲	container را برای اشغال فضای مورد نیاز در یک دستگاه با عرض ≥ ۵۶۸ پیکسل تعیین می کند.
۳	container را برای اشغال فضای مورد نیاز در دستگاه با عرض ≥ ۷۶۸ پیکسل تعیین می کند.
۴	container را برای اشغال فضای مورد نیاز در یک دستگاه با عرض ۱۰۲۴ پیکسل تعیین می کند.
۵	container را برای اشغال فضای مورد نیاز در یک دستگاه با عرض ≥ ۱۲۸۰ پیکسل تعیین می کند.

در مثال زیر قصد داریم یک شبکه ریسپانسیو را با یک ردیف دارای چهار ستون ایجاد کنیم.
ستون ها باید روی صفحه های کوچک قرار گیرند و باید عرض را بپوشانند:
۵۰٪ در صفحه نمایش های متوسط و با عرض: ۲۵٪ در صفحه های بزرگ.

این کار با اضافه کردن کلاس .pure-u-1 برای صفحه های کوچک، .pure-u-md-1-2 برای صفحه های رسانه ای و .pure-u-lg-1-4 برای صفحه های بزرگ انجام می شود.
اندازه صفحه را برای دیدن پاسخ شبکه به اندازه صفحه نمایش تغییر دهید.

مثال

purecss_responsive_design.htm

مثال :

<html>
   <head>
      <title>The PURE.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }	

         .graybox {
            background: rgb(240, 240, 240);
            border: 1px solid #ddd;			
         }	 
      </style>
   </head>
   <body> 
   
      <div class = "grids-example">       	  
         <div class = "pure-g">
            <div class = "pure-u-1-1">
               <div class = "graybox">
                  <p>These four columns should stack on small screens, 
                  should take up width: 50% on medium-sized screens, and should 
                  take up width: 25% on large screens.</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class = "graybox">
                  <p>First Column</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class="graybox">
                  <p>Second Column</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class="graybox">
                  <p>Third Column</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class = "graybox">
                  <p>Fourth Column</p>
               </div>
            </div>
         </div>
      </div>
	  
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1">
               <div class = "graybox">
                   <p>This column is to occupy the complete space of a row.</p>
               </div>
            </div>
         </div>
      </div>
	  
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-2-5">
               <div class = "graybox">
                  <p>This column is to occupy the two-fifth of the space of a row.</p>
               </div>
            </div>
         </div>
      </div>
      
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-3-5">
               <div class = "graybox">
                  <p>This column is to occupy the three-fifth of the space of a row.</p>
               </div>
            </div>
         </div>
      </div>   
      
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 1: This column is to occupy the one-third of the
                  space of a row on all devices.</p>
               </div>
            </div>
			
            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 2: This column is to occupy the one-third of the space 
                     of a row on all devices.</p>
               </div>
            </div>
			
            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 3: This column is to occupy the one-third of the space of a 
                     row on all devices.</p>
               </div>
            </div>
         </div>
      </div>	
   </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<html>

<head>

<title>The PURE.CSS Containers</title>

<style>

.grids-example {

background: rgb(250, 250, 250);

margin: 2em auto;

font-family: Consolas, 'Liberation Mono', Courier, monospace;

text-align: center;

}

.graybox {

background: rgb(240, 240, 240);

border: 1px solid #ddd;

}

</style>

</head>

<body>

<p>These four columns should stack on small screens,

should take up width: 50% on medium-sized screens, and should

take up width: 25% on large screens.</p>

</div>

<p>First Column</p>

</div>

<p>Second Column</p>

</div>

<p>Third Column</p>

</div>

<p>Fourth Column</p>

</div>

<p>This column is to occupy the complete space of a row.</p>

</div>

<p>This column is to occupy the two-fifth of the space of a row.</p>

</div>

<p>This column is to occupy the three-fifth of the space of a row.</p>

</div>

<p>Column 1: This column is to occupy the one-third of the

space of a row on all devices.</p>

</div>

<p>Column 2: This column is to occupy the one-third of the space

of a row on all devices.</p>

</div>

<p>Column 3: This column is to occupy the one-third of the space of a

row on all devices.</p>

</div>

</body>

</html>

نتیجه

نتیجه را تأیید کنید.
این چهر ستون ستون باید روی صفحه های کوچک قرار گیرند و باید عرض را بپوشانند:
۵۰٪ در صفحه نمایش های متوسط و با عرض: ۲۵٪ در صفحه های بزرگ.