Pangkalahatang-ideya ng Responsive Design sa CSS

Pangkalahatang-ideya ng Responsive Design sa CSS

Ipinaliliwanag ng artikulong ito ang pangkalahatang-ideya ng responsive design sa CSS.

Magbibigay kami ng pangkalahatang-ideya tungkol sa pangunahing konsepto ng responsive design at ang papel ng CSS sa pagpapatupad nito.

YouTube Video

HTML para sa Preview

css-responsive-overview.html
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-responsive-overview.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Responsive Design</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Responsive Design Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>Media Queries</h3>
 23            <section>
 24                <header><h4>CSS</h4></header>
 25<pre class="sample">
 26/* When the screen width is 600px or less */
 27@media (max-width: 600px) {
 28  body {
 29    background-color: lightblue;
 30  }
 31}
 32/* When the screen width is between 601px and 1200px */
 33@media (min-width: 601px) and (max-width: 1200px) {
 34  body {
 35    background-color: lightgreen;
 36  }
 37}
 38/* When the screen width is 1201px or more */
 39@media (min-width: 1201px) {
 40  body {
 41    background-color: lightyellow;
 42  }
 43}
 44</pre>
 45            </section>
 46        </article>
 47        <article>
 48            <h3>Fluid Layouts</h3>
 49            <section>
 50                <header><h4>CSS</h4></header>
 51<pre class="sample">
 52.container {
 53  width: 80%; /* 80% width relative to the parent element */
 54  margin: 0 auto; /* Center the element */
 55}
 56</pre>
 57            </section>
 58        </article>
 59        <article>
 60            <h3>Responsive Images</h3>
 61            <section>
 62                <header><h4>CSS</h4></header>
 63<pre class="sample">
 64img {
 65  max-width: 100%;
 66  height: auto;
 67}
 68</pre>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>Viewport</h3>
 73            <section>
 74                <header><h4>HTML</h4></header>
 75                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>CSS Frameworks</h3>
 80            <section>
 81                <header><h4>HTML</h4></header>
 82<pre>
 83&lt;div class="container"&gt;
 84  &lt;div class="row"&gt;
 85    &lt;div class="col-md-6"&gt;Left content&lt;/div&gt;
 86    &lt;div class="col-md-6"&gt;Right content&lt;/div&gt;
 87  &lt;/div&gt;
 88&lt;/div&gt;
 89</pre>
 90            </section>
 91        </article>
 92        <article>
 93            <h3>Flexbox &amp; Grid Layout</h3>
 94            <section>
 95                <header><h4>CSS</h4></header>
 96<pre class="sample">
 97/* Flex Example */
 98.container {
 99  display: flex;
100  flex-wrap: wrap; /* Allow elements to wrap */
101}
102
103.item {
104  flex: 1 1 200px; /* Each item has a minimum width of 200px */
105}
106
107/* Grid Example */
108.container {
109  display: grid;
110  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
111  gap: 16px;
112}
113</pre>
114            </section>
115        </article>
116    </main>
117</body>
118</html>

Pangkalahatang-ideya ng Responsive Design sa CSS

Sa CSS, ang responsive design ay isang pamamaraan para maipakita ng tama ang layout at nilalaman ng isang webpage sa iba't ibang uri ng mga device at sukat ng screen, tulad ng mga smartphone, tablet, at desktop. Upang makamit ang responsive design, pangunahing ginagamit ang mga sumusunod na tekniko at pamamaraan.

Media Queries

 1/* When the screen width is 600px or less */
 2@media (max-width: 600px) {
 3  body {
 4    background-color: lightblue;
 5  }
 6}
 7/* When the screen width is between 601px and 1200px */
 8@media (min-width: 601px) and (max-width: 1200px) {
 9  body {
10    background-color: lightgreen;
11  }
12}
13/* When the screen width is 1201px or more */
14@media (min-width: 1201px) {
15  body {
16    background-color: lightyellow;
17  }
18}

Ang mga media query ay isang tampok na nagpapahintulot sa iyo na maglagay ng iba't ibang tuntunin ng CSS batay sa lapad, taas, resolusyon, at iba pa ng device. Pinapahintulutan nito na magamit ang iba't ibang estilo depende sa sukat ng screen.

Sa halimbawang ito, nagbabago ang kulay ng background depende sa lapad ng screen.

Fluid Layouts

1.container {
2  width: 80%; /* 80% width relative to the parent element */
3  margin: 0 auto; /* Center the element */
4}

Sa responsive design, ang lapad at taas ng mga elemento ay tinutukoy gamit ang mga relative na yunit tulad ng porsyento o em sa halip na mga absolute pixel na halaga. Pinapahintulutan nito na magbago ang layout nang may pagiging flexible ayon sa sukat ng screen.

Mga Larawang Responsive

1img {
2  max-width: 100%;
3  height: auto;
4}

Itinatakda rin ang mga larawan upang mag-adjust ayon sa sukat ng screen. Halimbawa, maaaring gamitin ang max-width upang ayusin ang mga larawan nang sa gayon ay hindi sila lalampas sa lapad ng kanilang parent element.

Mga Setting ng Viewport

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

Gamitin ang <meta> tag sa HTML upang matiyak na tama ang interpretasyon ng browser sa lapad ng screen ng device. Kung wala ito, hindi gagana nang maayos ang responsive design, lalo na sa mga mobile device.

Paggamit ng CSS Frameworks

Ang mga CSS framework tulad ng Bootstrap at Tailwind CSS ay karaniwang ginagamit upang mahusay na makamit ang responsive design. Ang mga framework na ito ay idinisenyo upang madaling makagawa ng responsive layouts gamit ang mga paunang itinakdang klase.

Halimbawa: Grid System ng Bootstrap

1<div class="container">
2  <div class="row">
3    <div class="col-md-6">Left content</div>
4    <div class="col-md-6">Right content</div>
5  </div>
6</div>

Sa halimbawa sa itaas, kapag ang lapad ng screen ay md (katamtamang laki, karaniwan ay 768px o higit pa), dalawang kolum ang nakaayos nang magkatabi, ngunit sa mas makitid na screen, nakaayos ang mga ito nang patayo.

Flexbox at Grid Layout

 1/* Flex Example */
 2.container {
 3  display: flex;
 4  flex-wrap: wrap; /* Allow elements to wrap */
 5}
 6
 7.item {
 8  flex: 1 1 200px; /* Each item has a minimum width of 200px */
 9}
10
11/* Grid Example */
12.container {
13  display: grid;
14  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
15  gap: 16px;
16}

Ang paggamit ng CSS flexbox o grid ay nagpapahintulot ng mas nababagay na mga pag-aayos ng layout. Ang mga teknolohiyang pang-layout na ito ay akma para sa responsive design dahil madali nitong naaangkop ang mga layout ayon sa laki ng screen.

Buod

Ang responsive design ay isang mahalagang paraan upang tiyakin na komportableng mababasa ng mga gumagamit ang mga website anuman ang device na kanilang ginagamit. Sa pamamagitan ng pagsasama ng media queries, flexible layouts, frameworks, at mga bagong teknolohiyang pang-layout tulad ng Flexbox at Grid, posible ang paglikha ng mas nababagay at adaptibong mga web page.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video