123 lines
3.4 KiB
Markdown
123 lines
3.4 KiB
Markdown
---
|
||
id: 5a94fe7769fb03452672e463
|
||
title: Use Media Queries to Create Responsive Layouts
|
||
localeTitle: Utilice consultas de medios para crear diseños receptivos
|
||
challengeType: 0
|
||
videoUrl: ''
|
||
---
|
||
|
||
## Description
|
||
<section id='description'>
|
||
CSS Grid puede ser una manera fácil de hacer que su sitio sea más receptivo al usar consultas de medios para reorganizar las áreas de la cuadrícula, cambiar las dimensiones de una cuadrícula y reorganizar la ubicación de los elementos.
|
||
En la vista previa, cuando el ancho de la ventana gráfica es de 300 px o más, el número de columnas cambia de 1 a 2. El área de publicidad ocupa la columna izquierda por completo.
|
||
</section>
|
||
|
||
## Instructions
|
||
<section id='instructions'>
|
||
Cuando el ancho de la ventana <code>400px</code> sea de <code>400px</code> o más, haga que el área del encabezado ocupe la fila superior completamente y el área del pie de página ocupe la fila inferior completamente.
|
||
</section>
|
||
|
||
## Tests
|
||
<section id='tests'>
|
||
|
||
```yml
|
||
tests:
|
||
- text: "Cuando la ventana <code>400px</code> es de <code>400px</code> o más, la clase de <code>container</code> debe tener una propiedad de <code>grid-template-areas</code> en la que las áreas de pie de página y encabezado ocupen las filas superior e inferior respectivamente, y el anuncio y el contenido ocupen las columnas izquierda y derecha de la fila central".
|
||
testString: 'assert(code.match(/@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi), "When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.");'
|
||
|
||
```
|
||
|
||
</section>
|
||
|
||
## Challenge Seed
|
||
<section id='challengeSeed'>
|
||
|
||
<div id='html-seed'>
|
||
|
||
```html
|
||
<style>
|
||
.item1 {
|
||
background: LightSkyBlue;
|
||
grid-area: header;
|
||
}
|
||
|
||
.item2 {
|
||
background: LightSalmon;
|
||
grid-area: advert;
|
||
}
|
||
|
||
.item3 {
|
||
background: PaleTurquoise;
|
||
grid-area: content;
|
||
}
|
||
|
||
.item4 {
|
||
background: lightpink;
|
||
grid-area: footer;
|
||
}
|
||
|
||
.container {
|
||
font-size: 1.5em;
|
||
min-height: 300px;
|
||
width: 100%;
|
||
background: LightGray;
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
grid-template-rows: 50px auto 1fr auto;
|
||
grid-gap: 10px;
|
||
grid-template-areas:
|
||
"header"
|
||
"advert"
|
||
"content"
|
||
"footer";
|
||
}
|
||
|
||
@media (min-width: 300px){
|
||
.container{
|
||
grid-template-columns: auto 1fr;
|
||
grid-template-rows: auto 1fr auto;
|
||
grid-template-areas:
|
||
"advert header"
|
||
"advert content"
|
||
"advert footer";
|
||
}
|
||
}
|
||
|
||
@media (min-width: 400px){
|
||
.container{
|
||
/* change the code below this line */
|
||
|
||
grid-template-areas:
|
||
"advert header"
|
||
"advert content"
|
||
"advert footer";
|
||
|
||
/* change the code above this line */
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<div class="container">
|
||
<div class="item1">header</div>
|
||
<div class="item2">advert</div>
|
||
<div class="item3">content</div>
|
||
<div class="item4">footer</div>
|
||
</div>
|
||
```
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</section>
|
||
|
||
## Solution
|
||
<section id='solution'>
|
||
|
||
|
||
```js
|
||
var code = "@media (min-width: 400px){.container{ grid-template-areas: \"header header\" \"advert content\" \"footer footer\";}}"
|
||
```
|
||
|
||
</section>
|