css - 如何使 px 大小响应？

Question

我正在查看 Quora 和 Facebook 提要中的用户显示图片。

这些图片的固定大小为:

width: 40px;
height: 40px;

当我改变浏览器大小时页面是响应式的， 这些图片的大小保持不变，40px 和 40px。

还有什么用来保持图片大小不变的？

据我所知，px 不依赖于父元素。

Answer 1

通过定义像素密度，可以在响应式设计中使用像素比率。

例如，这通常在大多数 HTML 文档的 header 部分中完成:

<meta name="viewport" content="width=device-width>

使用此标记，像素密度为 2.0 的设备会将像素宽度从 640px 修改为 320px。这是根据用户的设备/视口(viewport)调整像素比率的众多方法之一。