freeCodeCamp/create-a-media-query.md at 873fce02a2d2124f3b76ce3f317fb29b34abb542

Oliver Eyton-Williams dec409a4bd fix: s/localeTitle/title/g

2020-10-06 23:10:08 +05:30

2.6 KiB

Raw Blame History

id, challengeType, videoUrl, forumTopicId, title

id	challengeType	videoUrl	forumTopicId	title
587d78b0367417b2b2512b08	0	https://scrimba.com/c/cPp7VfD	1	创建一个媒体查询

Description

媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的可视窗口大小调整内容的布局。可视窗口是用户在网页上的可见区域，根据访问网站的设备不同而不同。媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。你可以在媒体查询中使用各种选择器和样式。下面是一个媒体查询的例子，当设备宽度小于或等于 100px 时返回内容： @media (max-width: 100px) { /* CSS Rules */ } 以下定义的媒体查询，是当设备高度大于或等于 350px 时返回内容： @media (min-height: 350px) { /* CSS Rules */ } 只有当媒体类型与所使用的设备的类型匹配时，媒体查询中的 CSS 属性才生效。

Instructions

增加一个媒体查询，当设备的高度小于或等于 800px 时，p 标签的 font-size 为 12px。

Tests

tests:
  - text: 声明一个<code>@media</code>媒体查询，<code>height</code> 小于或等于 800px。
    testString: assert($("style").text().replace(/\s/g ,'').match(/@media\(max-height:800px\)/g));
  - text: 当设备 <code>height</code> 小于或等于 800px 时，<code>p</code> 元素 <code>font-size</code> 应为 10px。
    testString: assert($("style").text().replace(/\s/g ,'').match(/@media\(max-height:800px\){p{font-size:10px;?}}/g));
  - text: 当设备的<code>height</code>大于 800px 时，<code>p</code>元素的<code>font-size</code>初始值为 20px。
    testString: assert($("style").text().replace(/\s/g ,'').replace(/@media.*}/g, '').match(/p{font-size:20px;?}/g));

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

2.6 KiB Raw Blame History