2.9 KiB
2.9 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78b0367417b2b2512b08 | Create a Media Query | 0 | Criar uma consulta de mídia |
Description
@media (max-width: 100px) { /* CSS Rules */ }
e a consulta de mídia a seguir retorna o conteúdo quando o a altura do dispositivo é maior ou igual a 350px: @media @media (min-height: 350px) { /* CSS Rules */ }
Lembre-se, o CSS dentro da consulta de mídia é aplicado somente se o tipo de mídia corresponder ao do dispositivo que está sendo usado. Instructions
p
tenha um font-size
de font-size
de 10px quando a altura do dispositivo for menor ou igual a 800px. Tests
tests:
- text: Seu elemento <code>p</code> deve ter o <code>font-size</code> da <code>font-size</code> de 10px quando a <code>height</code> do dispositivo for menor ou igual a 800px.
testString: 'assert($("p").css("font-size") == "10px", "Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.");'
- text: Declare uma consulta <code>@media</code> para dispositivos com uma <code>height</code> menor ou igual a 800px.
testString: 'assert(code.match(/@media\s*?\(\s*?max-height\s*?:\s*?800px\s*?\)/g), "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.");'
Challenge Seed
<style>
p {
font-size: 20px;
}
/* Add media query below */
</style>
<p>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.</p>
Solution
// solution required