用于材料设计的 CSS 单元

【问题标题】：CSS Units for Material Design用于材料设计的 CSS 单元
【发布时间】：2018-11-23 09:25:51
【问题描述】：

我希望使用 CSS 遵循 Material Design（不明确安装 MD），但这些单位对我来说有点混乱。我知道大多数元素的大小和定位在 4dp 或 8dp 网格上，但我不确定这将如何转换为 CSS 单元。我知道使用 rems/ems 通常是可扩展性的好习惯，但在 Material Design 中没有提到它们（至少在尺寸/定位方面）。

例如，<button> 标签可能被称为具有 8'dp' 填充；我希望按钮可以针对不同的设备进行缩放，并且我希望尽可能多地重用 CSS。

我是否应该将“dp”替换为“px”并仅使用像素单位，并使用不同的断点来支持不同的设备？或者我应该以不同的方式处理这个问题？

【问题讨论】：

标签： css material-design

【解决方案1】：

是的，您应该使用像素单位，我们没有将传递的值转换为 4（或 8）倍数的原生 CSS 单位。

为了使不同设备的样式保持相同的比例，您可以在 HTML 文件中使用以下标签，在 <head> 内：

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

在 W3Schools 你可以找到a better explanation for the <meta> viewport element:

<meta> 视口元素向浏览器提供有关如何控制页面尺寸和缩放的说明。

width=device-width 部分将页面宽度设置为跟随设备的屏幕宽度（取决于设备）。

initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。

【讨论】：