@media (max-width: 100px) { /* CSS Rules */ }",
"and the following media query returns the content when the device's height is more than or equal to 350px:",
"@media (min-height: 350px) { /* CSS Rules */ }",
"Remember, the CSS inside the media query is applied only if the media type matches that of the device being used.",
"p tag has a font-size of 10px when the device's height is less than or equal to 800px."
],
"tests": [
{
"text": "Your p element should have the font-size of 10px when the device height is less than or equal to 800px.",
"testString": "assert($('p').css('font-size') == '10px', 'Your p element should have the font-size of 10px when the device height is less than or equal to 800px.');"
},
{
"text": "Declare a @media query for devices with a height less than or equal to 800px.",
"testString": "assert(code.match(/@media\\s?\\(max-height:\\s*?800px\\)/g), 'Declare a @media query for devices with a height less than or equal to 800px.');"
}
],
"releasedOn": "Feb 17, 2017",
"solutions": [],
"hints": [],
"challengeType": 0,
"translations": {
"pt-br": {
"title": "Criando uma Media Query",
"description": [
"Media Queries são uma nova técnica introduzida no CSS3 que mudam a apresentação do conteúdo de acordo com os diferentes tamanhos de janela de exibição. A janela de exibição é a área visível de uma página da web, e é diferente dependendo do dispositivo utilizado para acessar o site.",
"Media Queries consistem em um tipo de mídia, e se o tipo de mídia corresponder com o dispositivo no qual o documento está sendo exibido, os estilos são aplicados. Você pode colocar quantos seletores e estilos quanto desejar dentro de suas media queries.",
"Segue um exemplo de media query que retorna seu conteúdo quando a largura do dispositivo é menor que 100px:",
"@media (max-width: 100px) { /* Regras do CSS */ }",
"Lembre-se, o CSS dentro da media query só é aplicado se o tipo de mídia corresponder ao dispositivo em uso.",
"p tenha um font-size de 10px quando a altura do dispositivo for menor ou igual a 800px."
]
}
},
"files": {
"indexhtml": {
"key": "indexhtml",
"ext": "html",
"name": "index",
"contents": [
"",
" ",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.
" ], "head": [], "tail": [] } } }, { "id": "587d78b1367417b2b2512b09", "title": "Make an Image Responsive", "description": [ "Making images responsive with CSS is actually very simple. Instead of applying an absolute width to an element:", "img { width: 720px; }",
"You can use:",
"img {", "The
max-width: 100%;
display: block;
height: auto;
}
max-width property of 100% scales the image to fit the width of its container, but the image won't stretch wider than its original width. Setting the display property to block changes the image from an inline element (its default), to a block element on its own line. The height property of auto keeps the original aspect ratio of the image.",
"img tag to make it responsive to the size of its container. It should display as a block-level element, it should fit the full width of its container without stretching, and it should keep its original aspect ratio."
],
"tests": [
{
"text": "Your img tag should have a max-width set to 100%.",
"testString": "assert(code.match(/max-width:\\s*?100%;/g), 'Your img tag should have a max-width set to 100%.');"
},
{
"text": "Your img tag should have a display set to block.",
"testString": "assert($('img').css('display') == 'block', 'Your img tag should have a display set to block.');"
},
{
"text": "Your img tag should have a height set to auto.",
"testString": "assert(code.match(/height:\\s*?auto;/g), 'Your img tag should have a height set to auto.');"
}
],
"releasedOn": "Feb 17, 2017",
"challengeType": 0,
"solutions": [],
"hints": [],
"translations": {
"pt-br": {
"title": "Torne uma Imagem Responsiva",
"description": [
"Fazer com que imagens sejam responsivas é muito simples com CSS. Ao invés de aplicar uma largura absoluta a um elemento:",
"img { width: 720px; }",
"Você pode usar:",
"img {", "A propriedade
max-width: 100%;
display: block;
height: auto;
}
max-width em 100% ajusta o tamanho da imagem para preencher a largura de seu container, mas a imagem não irá esticar mais que sua largura original. Ajustando a propriedade display como block muda imagem de elemento inline (o padrão) para um elemento block com uma linha própria. A propriedade height na configuração auto mantem a proporção original da imagem.",
"img para torná-la responsiva com relação ao tamanho do seu container. Ela deve ser exibida como um elemento de nível block, e deve preencher toda a largura de seu container sem esticar, mantendo as proporções originais."
]
}
},
"files": {
"indexhtml": {
"key": "indexhtml",
"ext": "html",
"name": "index",
"contents": [
"",
"",
"![\"freeCodeCamp](\"https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg\")
"
],
"head": [],
"tail": []
}
}
},
{
"id": "587d78b1367417b2b2512b0a",
"title": "Use a Retina Image for Higher Resolution Displays",
"description": [
"The simplest way to make your images appear \"retina\" (and optimize them for retina displays) is to define their width and height values as only half of what the original file is.",
"Here is an example of an image that is only using half of the original height and width:",
"<style>", "
img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="A most excellent picture">
width and height of the img tag to half of their original values. In this case, both the original height and the original width are 200px."
],
"tests": [
{
"text": "Your img tag should have a width of 100 pixels.",
"testString": "assert($('img').css('width') == '100px', 'Your img tag should have a width of 100 pixels.');"
},
{
"text": "Your img tag should have a height of 100 pixels.",
"testString": "assert($('img').css('height') == '100px', 'Your img tag should have a height of 100 pixels.');"
}
],
"releasedOn": "Feb 17, 2017",
"challengeType": 0,
"solutions": [],
"hints": [],
"translations": {
"pt-br": {
"title": "Use uma Imagem Retina para Telas de Alta Resolução",
"description": [
"A maneira mais simples de fazer com que suas imagens tenham uma aparência \"retina\" (e otimizadas para telas retina) é definindo seus valores de width e height como somente metade do tamanho original dos arquivos.",
"Segue um exemplo de imagem que possui somente metade dos valores originais de altura e largura:",
"<style>", "
img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="A most excellent picture">
width e height da tag img como metade do seu tamanho original. Nesse caso, o valor original de height e o valor original de width são de 200px."
]
}
},
"files": {
"indexhtml": {
"key": "indexhtml",
"ext": "html",
"name": "index",
"contents": [
"",
"",
"![\"freeCodeCamp](\"https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg\")
"
],
"head": [],
"tail": []
}
}
},
{
"id": "587d78b1367417b2b2512b0c",
"title": "Make Typography Responsive",
"description": [
"Instead of using em or px to size text, you can use viewport units for responsive typography. Viewport units, like percentages, are relative units, but they are based off different items. Viewport units are relative to the viewport dimensions (width or height) of a device, and percentages are relative to the size of the parent container element.",
"The four different viewport units are:",
"vw: 10vw would be 10% of the viewport's width.vh: 3vh would be 3% of the viewport's height.vmin: 70vmin would be 70% of the viewport's smaller dimension (height vs. width).vmax: 100vmax would be 100% of the viewport's bigger dimension (height vs. width).width of the h2 tag to 80% of the viewport's width and the width of the paragraph as 75% of the viewport's smaller dimension."
],
"tests": [
{
"text": "Your h2 tag should have a width of 80vw.",
"testString": "assert(code.match(/h2\\s*?{\\s*?width:\\s*?80vw;\\s*?}/g), 'Your h2 tag should have a width of 80vw.');"
},
{
"text": "Your p tag should have a width of 75vmin.",
"testString": "assert(code.match(/p\\s*?{\\s*?width:\\s*?75vmin;\\s*?}/g), 'Your p tag should have a width of 75vmin.');"
}
],
"releasedOn": "Feb 17, 2017",
"solutions": [],
"hints": [],
"challengeType": 0,
"translations": {
"pt-br": {
"title": "Torne a Tipografia Responsiva",
"description": [
"Ao invés de utilizar em ou px para alterar o tamanho do texto, você pode usar unidades da janela de exibição para obter tipografia responsiva. Unidades da janela de exibição, assim como porcentagens, são unidades relativas, mas que são baseadas em ítens diferentes. Unidades da janela de exibição são relativas às dimensões da janela de exibição (largura ou altura) de um dispositivo, enquanto que porcentagens são relativas ao tamanho do container do elemento pai.",
"As quatro unidades da janela de exibição são",
"vw: 10vw seria 10% da largura da janela de exibição.vh: 3vh seria 3% da altura da janela de exibição.vmin: 70vmin seria 70% da menor dimensão da janela de exibição (largura ou altura).vmax: 100vmax seria 100% da maior dimensão da janela de exibição (largura ou altura).width da tag h2 para 80% da largura da janela de exibição e a width do parágrafo para 75% da menor dimensão da janela de exibição."
]
}
},
"files": {
"indexhtml": {
"key": "indexhtml",
"ext": "html",
"name": "index",
"contents": [
"",
"",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.
" ], "head": [], "tail": [] } } } ] }