Movatterモバイル変換

[0]ホーム
URL:

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

Commit20161c5

Browse files
committed
feat: add container queries
1 parentf8575cd commit20161c5

File tree

3 files changed

+204
-0
lines changed

3 files changed

+204
-0
lines changed

‎102-container queries/index.html

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!-- Based on Learn how to use Media queries & Container queries by Kevin Powell (2024)
2+
see: https://www.youtube.com/watch?v=2rlWBZ17Wes -->
3+
<!DOCTYPE html>
4+
<htmllang="en">
5+
<head>
6+
<metacharset="UTF-8"/>
7+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
8+
<linkrel="stylesheet"href="style.css"/>
9+
<title>Container Queries</title>
10+
</head>
11+
<body>
12+
<divclass="wrapper">
13+
<main>
14+
<sectionclass="primary-content"style="--theme: dark">
15+
<h1>Media queries and container queries</h1>
16+
<p>
17+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
18+
Exercitationem neque tenetur numquam officiis officia, eos eligendi
19+
animi architecto aliquam dignissimos, at minus, aperiam expedita.
20+
Officia ad nostrum harum deleniti quasi!
21+
</p>
22+
<p>
23+
Consectetur sunt, in sit iure dolor ratione odit necessitatibus
24+
velit animi tempore, tenetur alias accusantium impedit ad vitae,
25+
quis totam! Minus provident exercitationem sapiente ut ex repellat
26+
vel odio doloremque?
27+
</p>
28+
<articleclass="card">
29+
<h2>Card in .primary-content</h2>
30+
<img
31+
src="https://images.unsplash.com/photo-1702927706292-c57d75cf2143?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDMyMzR8&ixlib=rb-4.0.3&q=80&w=400"
32+
alt=""
33+
/>
34+
<p>
35+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore
36+
reiciendis non eaque consectetur. Unde, delectus!
37+
</p>
38+
</article>
39+
</section>
40+
41+
<sectionclass="cards">
42+
<articleclass="card">
43+
<h2>Card 1</h2>
44+
<img
45+
src="https://images.unsplash.com/photo-1704137477371-bed38523c2eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
46+
alt=""
47+
/>
48+
<p>
49+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore
50+
reiciendis non eaque consectetur. Unde, delectus!
51+
</p>
52+
</article>
53+
<articleclass="card">
54+
<h2>Card 2</h2>
55+
<img
56+
src="https://images.unsplash.com/photo-1703783010857-9bd7a7b97c50?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
57+
alt=""
58+
/>
59+
<p>
60+
Molestias similique quasi expedita doloribus odit consectetur
61+
harum placeat qui! Alias commodi soluta possimus veritatis.
62+
</p>
63+
</article>
64+
<articleclass="card">
65+
<h2>Card 3</h2>
66+
<img
67+
src="https://images.unsplash.com/photo-1704137477371-bed38523c2eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDU1MDIxOTR8&ixlib=rb-4.0.3&q=80&w=400"
68+
alt=""
69+
/>
70+
<p>
71+
Cupiditate voluptate, provident cum aut tempore, voluptatem,
72+
repellendus nisi ratione ex laudantium nulla! Repellat, nemo?
73+
</p>
74+
</article>
75+
</section>
76+
</main>
77+
</div>
78+
</body>
79+
</html>

‎102-container queries/style.css

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
@importurl("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
:root {
8+
--bg-color: rebeccapurple;
9+
}
10+
11+
/* https://caniuse.com/css-media-range-syntax */
12+
@media screenand (width>= 600px) {
13+
:root {
14+
--bg-color: orangered;
15+
}
16+
}
17+
18+
body {
19+
font-family:"Roboto", sans-serif;
20+
margin:0;
21+
padding-block:2rem;
22+
/* background-color: rebeccapurple; */
23+
background-color:var(--bg-color);
24+
}
25+
26+
/* @media screen and (min-width: 600px) {
27+
body {
28+
background-color: orangered;
29+
}
30+
} */
31+
32+
/* https://caniuse.com/css-container-queries-style */
33+
@container style(--theme: dark) {
34+
.card {
35+
background: black;
36+
color: white;
37+
}
38+
39+
.card>* {
40+
color: white;
41+
}
42+
}
43+
44+
.primary-content,
45+
.cards {
46+
container-type: inline-size;
47+
}
48+
49+
main {
50+
display: grid;
51+
gap:1rem;
52+
}
53+
54+
@media (min-width:760px) {
55+
main {
56+
grid-template-columns:1fr300px;
57+
}
58+
}
59+
60+
.cards {
61+
/* container-type: inline-size;
62+
container-name: card-grid; */
63+
container: card-grid/ inline-size;
64+
}
65+
66+
.card {
67+
display: grid;
68+
gap:1rem;
69+
}
70+
71+
.cardh2 {
72+
font-size:clamp(1.5rem,10cqi,3rem);
73+
/* cqi = 10% of a query container's inline size */
74+
/* cqb is based on the block size */
75+
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries */
76+
/* https://caniuse.com/css-container-queries */
77+
}
78+
79+
@container card-grid (min-width:45ch) {
80+
.card {
81+
/* background: yellow; */
82+
grid-template-columns: autominmax(25ch,1fr);
83+
}
84+
85+
.cardh2 {
86+
grid-column:1/-1;
87+
}
88+
}
89+
90+
@layer demo {
91+
h1,
92+
p {
93+
color: white;
94+
}
95+
96+
img {
97+
max-width:100%;
98+
border-radius:0.25rem;
99+
}
100+
101+
.wrapper {
102+
width:min(100%-3rem,1200px);
103+
margin-inline: auto;
104+
}
105+
106+
.cards {
107+
display: grid;
108+
gap:1.5rem;
109+
height:100vh;
110+
align-content: start;
111+
}
112+
113+
.card {
114+
background-color:#fff;
115+
border-radius:4px;
116+
box-shadow:015px15pxrgb(000/0.25);
117+
padding:0.75rem;
118+
}
119+
120+
.card>* {
121+
margin:0;
122+
color:#000;
123+
}
124+
}

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@
107107
| 099|[Parallax Website](099-parallax%20website)|[Live Demo](https://codepen.io/solygambas/full/poeBdPr)|
108108
| 100|[Hulu Webpage Clone](100-hulu%20webpage%20clone)|[Live Demo](https://codepen.io/solygambas/full/rNmmqBy)|
109109
| 101|[Cascade Layers](101-cascade%20layers)|[Live Demo](https://codepen.io/solygambas/full/poYaZmv)|
110+
| 102|[Container queries](102-container%20queries)|[Live Demo](https://codepen.io/solygambas/full/abMqPNy)|
110111

111112
This repository is mostly based on 2 courses by Brad Traversy (2020):
112113

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp