响应式设计：

希望拥抱移动端的公司普遍希望为他们的网站创建一个有着不同的网址的移动版本（大多是像m.example.com或者example.mobi这类）。这意味着一个网站需要开发两个分开的版本，而且要保持时效性。

- 三大技术 1.液态网格

响应式站点不只是在断点之间改变它们的布局，它们是建立在灵活网格上的。

使用灵活网格，你只需要加进去一个断点，在内容看起来不齐整的时候改变设计。例如如果一行随着屏幕大小增加而增长得不可读的长，或者是一个盒子在变窄时把每行的两个单词挤到一起。

a 多栏布局

b 伸缩盒flex（flex-grow和 flex-shrink）

c css网格grid（fr）

2.液态图像：

用一张有着所需最大尺寸的图像。然后缩放它。 [<picture>]元素和[<img>]srcset，sizes

img {
  max-width: 100%:  //灵活缩小放大。但是不会超过本身大小。、
  /*
  width: 100%;
  height: auto;
  */  //这样也可，图像将进行响应来放大或缩小：
  
  
} 

缺点：1.移动端图片小，图像有可能会显示得比它的原始尺寸小很多

<picture>                    
        //HTML5 引入了 <picture> 元素，该元素使您可以定义多幅图像。
      //我们设置了不同的来源，而匹配优先权的第一个来源是正在使用的来源：
     <source srcset="img_smallflower.jpg" media="(max-width: 400px)">  
      <source srcset="img_flowers.jpg">
      <img src="img_flowers.jpg" alt="Flowers">
   ** <img srcset="elva-fairy-480w.jpg 480w,     //可供选折的图片组，名字，尺寸
                 elva-fairy-800w.jpg 800w"
         sizes="(max-width: 600px) 480px,   //媒体条件 条件为真的时候的选择，没有媒体条件为真的选择。
                800px"
         src="elva-fairy-800w.jpg"
         alt="Elva dressed as a fairy">
  
</picture>

//srcset 属性是必需的，它定义图像的来源。
media 属性是可选的，它接受可在 CSS @media 规则 中找到的媒体查询。
提示：您还应该为不支持 <picture> 元素的浏览器定义 <img> 元素。

3.媒体查询

响应式设计仅仅是因为媒介查询才新兴起来的。

现代布局方式，例如多栏布局、伸缩盒flex（flex-grow和 flex-shrink）、css网格grid（fr），默认是响应式的。它们都假设你在尽力创建一个可伸缩网格，而且给了你更容易这样做的方式。和所有尺寸的屏幕都使用一种布局不同的是，布局是可以改变的：侧栏可以在小屏幕上重新布局，而替代用的导航栏也可以显示出来。

使用方式：为窄屏设备（例如移动设备）创建一个简单的单栏布局，然后检查是否是大些的屏幕，在你知道你有足够容纳的屏幕宽度的时候，开始采用一种多栏的布局。这经常被描述为移动优先设计。

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
}

响应式排版：，这描述了根据屏幕真实使用范围的多少，在媒体查询的同时改变字体大小。

html {
  font-size: 1em;
}

h1 {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  h1 {
    font-size: 4rem;
  }
}

使用视口单位vw来实现响应式排版。1vw等同于视口宽度的百分之一，即如果你用vw来设定字体大小的话，字体的大小将总是随视口的大小进行改变。

问题：用户失去了放缩任何使用vw单位的文本的能力。所以你永远都不要只用viewport单位设定文本。

解决方法：calc()，如果你将vw单位加到了使用固定大小（例如em或者rem）的值组，那么文本仍然是可放缩的。基本来说，是vw加在了放缩后的值上。

h1 {
  font-size: 6vw;
}

视口元标签

<meta name="viewport" content="width=device-width,initial-scale=1">

告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度，将文档放大到其预期大小的100%，
在移动端以你所希望的为移动优化的大小展示文档。
-   `initial-scale`：设定了页面的初始缩放，我们设定为1。
-   `height`：特别为视口设定一个高度。
-   `minimum-scale`：设定最小缩放级别。
-   `maximum-scale`：设定最大缩放级别。
-   `user-scalable`：如果设为`no`的话阻止缩放。

2.8 应用-响应式/自适式

响应式设计：

- 三大技术 1.液态网格

2.液态图像：

3.媒体查询