Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b973eb4

Browse files
chapter 2 - 2.6 uploaded
chapter 2 - 2.6 uploaded
1 parent 958c4d9 commit b973eb4

File tree

1 file changed

+108
-0
lines changed

1 file changed

+108
-0
lines changed

‎README.md

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ Topics included/covered
7171
- 2.3. [Hover with Transform Transition Amimation](#23-hover-with-Transform-transition-amimation)
7272
- 2.4. [CSS variables Cascading](#24-css-variables-cascading)
7373
- 2.5. [JavaScript Theme Switcher](#25-javascript-theme-switcher) | [JavaScript Theme Color Swatch Switcher](#25-javascript-theme-color-swatch-switcher)
74+
- 2.6. [Media Query Responsive Layout](#26-media-query-responsive-layout)
7475

7576
3. [CSS Variables Resources](#3-css-variables-resources)
7677

@@ -1557,6 +1558,113 @@ swatches.forEach((curSwatch) => {
15571558
</figure>
15581559
</p>
15591560

1561+
2.6. Media Query Responsive Layout
1562+
---------------------
1563+
1564+
> **Syntax & Example**: `2.6-css-var-demo-media-query-responsive-layout.html`
1565+
1566+
```html
1567+
<!DOCTYPE html>
1568+
<html lang="en">
1569+
1570+
<head>
1571+
1572+
<meta charset="UTF-8">
1573+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1574+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
1575+
<title>2.6-css-var-demo-media-query-responsive-layout</title>
1576+
1577+
<link rel="stylesheet" href="2.6-style-css-var-demo-media-query-responsive-layout.css">
1578+
1579+
</head>
1580+
1581+
<body>
1582+
1583+
<div class="container">
1584+
1585+
<h1 class="top-heading-text" id="topHeadingText">2. CSS Variable Demo</h1>
1586+
1587+
<h2 class="subheading-text" id="subHeadingText">2.6 - CSS Variable Media Query Responsive Layout</h2>
1588+
1589+
<section class="section-container">
1590+
<article>Article 1</article>
1591+
<article>Article 2</article>
1592+
<article>Article 3</article>
1593+
<article>Article 4</article>
1594+
</section>
1595+
1596+
<footer class="footer-text">This is footer Text</footer>
1597+
1598+
</div>
1599+
1600+
</body>
1601+
1602+
</html>
1603+
```
1604+
1605+
> **Syntax & Example**: `2.6-style-css-var-demo-media-query-responsive-layout.css`
1606+
1607+
```css
1608+
:root {
1609+
--main-font-family: Verdana;
1610+
--main-grid-column-layout: 1fr 1fr 1fr 1fr;
1611+
--main-grid-row-layout: 1fr;
1612+
--main-margin: 20px;
1613+
}
1614+
1615+
body {
1616+
font-family: var(--main-font-family);
1617+
}
1618+
1619+
.section-container {
1620+
display: grid;
1621+
height: 70vh;
1622+
grid-template-columns: var(--main-grid-column-layout);
1623+
}
1624+
1625+
.section-container article {
1626+
margin: var(--main-margin);
1627+
grid-template-rows: var(--main-grid-row-layout);
1628+
padding: 10px;
1629+
background-color: #ababab;
1630+
text-align: center;
1631+
}
1632+
1633+
.footer-text {
1634+
font-size: 0.8em;
1635+
text-align: center;
1636+
}
1637+
1638+
@media screen and (max-width: 760px) {
1639+
:root {
1640+
--main-font-family: cursive;
1641+
--main-grid-column-layout: 1fr 1fr;
1642+
--main-margin: 10px;
1643+
}
1644+
}
1645+
```
1646+
1647+
<p>
1648+
<figure>
1649+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/2.6.1-css-var-demo-media-query-responsive-layout-default-view.png" alt="CSS Variables Demo - Media Query Responsive Layout - Default View" title="CSS Variables Demo - Media Query Responsive Layout - Default View" width="1000" border="2" />
1650+
<figcaption>&nbsp;&nbsp;&nbsp; Image 2.6.1 - CSS Variables Demo - Media Query Responsive Layout - Default View</figcaption>
1651+
</figure>
1652+
</p>
1653+
1654+
<p>
1655+
<figure>
1656+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/2.6.2-css-var-demo-media-query-responsive-layout-mobile-view.png" alt="CSS Variables Demo - Media Query Responsive Layout - Mobile View" title="CSS Variables Demo - Media Query Responsive Layout - Mobile View" width="300" border="2" />
1657+
<figcaption>&nbsp;&nbsp;&nbsp; Image 2.6.2 - CSS Variables Demo - Media Query Responsive Layout - Mobile View </figcaption>
1658+
</figure>
1659+
</p>
1660+
1661+
<p>
1662+
<figure>
1663+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/2.6.3-style-var-demo-media-query-responsive-layout.png" alt="Style CSS Variables Demo - Media Query Responsive Layout" title="Style CSS Variables Demo - Media Query Responsive Layout" width="1000" border="2" />
1664+
<figcaption>&nbsp;&nbsp;&nbsp; Image 2.6.3 - Style CSS Variables Demo - Media Query Responsive Layout </figcaption>
1665+
</figure>
1666+
</p>
1667+
15601668
3 CSS Variables Resources
15611669
=====================
15621670

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /