media type 与media query

link&import #

CSS link、@import共同点：

都是为了加载CSS文件。

CSS link、@import不同点：

• Link属于XHTML标签，而@import完全是CSS提供的一种方式。link除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
• @import要起作用，必须放在样式文件的最前面（包括注释的前面）。
• 并行加载、串行加载，加载性能的问题，参考下面的链接
• 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
• 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。 ？没有验证过！

建议：不适用@import，使用link
don’t use @import
Yahoo 网页性能最佳实践：使用link，不使用import

media type #

media type(媒体类型)：

是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。
例子：

<link href="style.css" media="screen print" ...  
  
@import url("style.css") screen;  
  
<style media="screen">  
@import url("style.css");  
</style>

media query(媒体查询)：

是对media type的一种增强，是CSS 3的重要内容之一。

例子：

<link media="only screen and (max-device-width: 480px)" href="style.css">

container query #

使用时需要先创建一个控制块上下文，然后对子元素可以采用包含块查询。

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

/* 设置块类型是 控制块 */
.post {
  container-type: inline-size;  
}

/* Default heading styles for the card title */
.card h2 {
  font-size: 1em;
}

/* If the container is larger than 700px */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

参考文档：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries