2.5 KiB
2.5 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78b0367417b2b2512b08 | Create a Media Query | 0 | 创建媒体查询 |
Description
@media (max-width: 100px) { /* CSS Rules */ }
并且以下媒体查询返回内容时设备的高度大于或等于350px: @media (min-height: 350px) { /* CSS Rules */ }
请记住,仅当媒体类型与正在使用的设备的媒体类型匹配时,才应用媒体查询中的CSS。 Instructions
p
标签的font-size
为10px。 Tests
tests:
- text: 当设备<code>height</code>小于或等于800px时,您的<code>p</code>元素的<code>font-size</code>为10px。
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: 为<code>height</code>小于或等于800px的设备声明<code>@media</code>查询。
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