HTML-CSS-Project/chapter22.html at main · TulyXPlatform/HTML-CSS-Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chapter 22: Responsive CSS</title>
  <link rel="stylesheet" href="style.css">
  <style>
    /* Extra CSS for demo */
    body.demo-rwd {
      background-color: rgb(192, 192, 233);
    }
    @media screen and (min-width: 480px) {
      body.demo-rwd {
        background-color: rgb(157, 179, 157);
      }
    }
    @media only screen and (orientation: landscape) {
      body.demo-rwd {
        background-color: rgb(253, 230, 230);
      }
    }

    /* Grid System */
    * { box-sizing: border-box; }
    .row::after {
      content: "";
      clear: both;
      display: block;
    }
    [class*="col-"] {
      float: left;
      padding: 8px;
      border: 1px solid black;
      text-align: center;
    }
    /* Mobile first */
    [class*="col-"] { width: 100%; }
    @media only screen and (min-width: 600px) {
      .col-m-3 { width: 25%; }
      .col-m-9 { width: 75%; }
      .col-m-12 { width: 100%; }
    }
    @media only screen and (min-width: 768px) {
      .col-3 { width: 25%; }
      .col-6 { width: 50%; }
      .col-12 { width: 100%; }
    }
  </style>
</head>
<body class="demo-rwd">
  <h2 class="chapter-header" id="heading">Chapter 22: Responsive CSS</h2>

  <div class="tag-section">
    <h3>2.1 Responsive Web Design</h3>
    <div class="tag-demo">
      <div class="head-demo">
        <p>Responsive web design makes your page look good on desktops, tablets, and mobile phones using only HTML and CSS.</p>
      </div>
    </div>
  </div>

  <div class="tag-section">
    <h3>2.2 RWD Viewport</h3>
    <div class="tag-demo">
      <div class="head-demo">
        <p>Use this in the &lt;head&gt; of your HTML:</p>
        <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>
      </div>
    </div>
  </div>

  <div class="tag-section">
    <h3>2.3 CSS Media</h3>
    <div class="tag-demo">
      <div class="head-demo">
        <h4>Media Types</h4>
        <ul>
          <li>all - All devices (default)</li>
          <li>print - For printers</li>
          <li>screen - For screens (desktop, tablet, mobile)</li>
        </ul>
        <p>Example: <code>media="screen,print"</code></p>

        <h4>Media Queries</h4>
        <p>The background changes based on screen width or orientation:</p>
        <pre>
body { background-color: blue; }
@media screen and (min-width: 480px) {
  body { background-color: green; }
}
@media only screen and (orientation: landscape) {
  body { background-color: grey; }
}
        </pre>
      </div>
    </div>
  </div>

  <div class="tag-section">
    <h3>2.4 RWD Grid View</h3>
    <div class="tag-demo">
      <div class="head-demo">
        <p>Example of a responsive 12-column grid layout:</p>
        <div class="row">
          <div class="col-3 col-m-3">DIV 1</div>
          <div class="col-6 col-m-9">DIV 2</div>
          <div class="col-3 col-m-12">DIV 3</div>
        </div>
      </div>
    </div>
  </div>

  <div class="tag-section">
    <h3>2.5 Mobile-first vs Desktop-first</h3>
    <div class="tag-demo">
      <div class="head-demo">
        <p><b>Mobile-first:</b> Start with small screens, then add styles for larger devices using <code>min-width</code>.</p>
        <p><b>Desktop-first:</b> Start with large screens, then adjust for smaller devices using <code>max-width</code>.</p>
      </div>
    </div>
  </div>
</body>
</html>