# Lesson 5: Creating Responsive Layouts
## Media Queries
決定螢幕尺寸的方式，通常是以width為準。
**viewport** - the area of the window in which web content can be seen. We use the dimensions of the viewport (usually the width, but sometimes the height) as the basis of our media queries.
### For more information about `viewport` see
* [What is a viewport?](https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts#What_is_a_viewport)
* [Using the viewport meta tag to control layout on mobile browsers](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)
## Adding Media Queries in Code
```css
@media(feature:value)
```
```css
@media(min-width:900px) {
body{
background:red;
}
}
```
{% hint style="warning" %}
講師的經驗是：從最小尺寸開始設計。Mobile -> Desktop
{% endhint %}
### Multiple Breakpoints
三種大小的設定方式
```css
/* Anything smaller than first breakpoint 600px */
.container {
// rules for small screen
}
/* Medium Screens */
@media (min-width: 600px) and (max-width:900px) {
.container {
// rules for medium-sized screen
}
}
/* Large Screens */
@media (min-width:901px) {
.container {
// rules for large screen
}
}
```
```css
/* Mobile first */
.container{
display:grid;
grid-template-columns: 300px 300px 300px;
grid-template-rows: 250px 600px;
border: 2px solid yellow;
/* Use grid-template-area to create a mobile layout where each named space occupies its own row */
grid-template-areas:
"hd hd hd "
"sd sd sd"
"main main main"
"ft ft ft";
}
.box{
border: 1px solid red;
background: #F8FA9D;
}
.header{
grid-area:hd;
}
.footer{
grid-area: ft;
}
.sidebar{
grid-area: sd;
}
.content{
grid-area: main;
}
/* If Screen Is Wide Enough */
@media(min-width:900px){
.container{
display:grid;
grid-template-columns: 300px 300px 300px;
grid-template-rows: 250px 600px;
grid-template-areas:
"hd hd hd hd hd hd hd hd"
"sd sd main main main main main main"
"ft ft ft ft ft ft ft ft";
border: 2px solid red;
}
}
```
### Further Research
Media Queries are actually a vast landscape of possibility, most of which you will probably never use - but, having a strong grasp of media queries and responsive breakpoints is essential for a web developer. For more information see the [MDN docs entry on using Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries).
## Nesting Grids
Nesting CSS grids is simple and can be done simply by using the `display:grid` rule for both a parent and child element.
```css
.container {
display:grid;
// ...
}
#one {
display:grid
}
```
Example
```markup
Exercise 1
```
```css
.container{
display:grid;
grid-template-columns: 300px 300px 300px;
grid-template-rows: 250px 600px;
/* grid-template-columns: repeat(3, 1fr); */
/* Initially each element has its own row for small screens */
grid-template-areas:
"hd"
"sd"
"main"
"ft";
border: 2px solid yellow;
}
/* add css for nested grid here */
.nestedGrid{
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
}
.nestedGrid > *{
border: 2px solid aquamarine;
}
.box{
border: 1px solid red;
background: #F8FA9D;
}
.header{
/* row start/column start/ row end/ column end */
grid-area:hd;
}
.footer{
grid-area: ft;
}
.sidebar{
grid-area: sd;
}
.content{
grid-area: main;
}
/* If Screen Is Wide Enough */
@media(min-width:900px) {
.container{
display:grid;
grid-template-columns: 300px 300px 300px;
grid-template-rows: 250px 600px;
grid-template-areas:
"hd hd hd hd hd hd hd hd"
"sd sd main main main main main main"
"ft ft ft ft ft ft ft ft";
border: 2px solid red;
}
}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://owen31302.gitbook.io/github-education/become-a-front-end-web-developer-or-udacity-3.-javascript-and-the-dom/2.-css-website-layout-website-components/lesson-5-creating-responsive-layouts.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.