补充

关于响应式和自适应

响应式场景：页面呈现在差异较大的设备上（比如 PC 和 mobile），当然设计也要有所变动
自适应场景：差异不大的情况下（比如 2 台不同尺寸的 PC，比如 PC 和 iPad）做自适应处理即可。比如弹性的水平间距和简单的布局调整，不用去考虑长宽、字体随着设备尺寸变化而变化（比如设计稿上的 button 在 iphone6 的宽度比在 iphone5 上的要大）

rem 方案（lib-flexible）缺点

设计稿的 px 转 rem 计算麻烦，常有多位小数，最终设计稿的标注的尺寸在页面会有些许误差（一般我们只取 2 位小数）

推荐的响应式方案-vw 方案

兼容性

如今 viewport 单位的兼容性已经很好了，推荐该方案
对于少数不支持的浏览器，用 viewport-units-buggyfill + postcss-viewport-units 处理

长宽比问题

使用 vw 方案有时会出现容器高度不一的情况，例子见再聊移动端页面的适配，用 postcss-aspect-ratio-mini 处理, 本质是 CSS 新属性 aspect-ratio，该属性可设置容器长宽比

响应式图片

我们想让图片能在不同大小的屏幕中自动缩放

1
2
3
img {
  max-width: 100%;
}

为什么用 max-width? 保证所有图片最大显示为其自身的 100%（即最大只可以显示为自身那么大）。此时，如果包含图片的元素（比如包含图片的 body 或 div）比图片固有宽度小，图片会缩放占满最大可用空间

为什么不用 width:100%? 这条规则会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下，图片会被无谓地拉伸。

写法

https://www.cnblogs.com/hgj123/p/6547915.html
https://www.imooc.com/article/14017

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* 方法1 */
img {
  /* img是行内元素。不是块级元素。如果不给img加上block,页面上会出现一点点空隙，图片不能完全贴合 */
  display: block;
  /* 宽度如果不需要跟着容器拉伸的话，可注释下面两行 */
  width: 100%;
  max-width: 100%;
  height: 100%;
}

/* 方法2 */
.some-class {
  /* 加载背景图 */
  background-image: url(images/background-photo.jpg);

  /* 背景图垂直、水平均居中 */
  background-position: center center;

  /* 背景图不平铺 */
  background-repeat: no-repeat;

  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;

  /* 让背景图基于容器大小伸缩 */
  background-size: cover;

  /* 设置背景颜色，背景图加载过程中会显示背景色 */
  background-color: #464646;
}

查询设备 device-width

常用的直接 F12 看模拟调试的移动设备即可，其他见 https://viewportsizes.com/#footer

CSS · 0.1px,0.2px……0.9px,1px 效果

CSS · 0.1px,0.2px……0.9px,1px 效果

Chrome 最小 font-size 为 12px

clientWidth,offsetWidth 等