我希望使用CSS来跟踪Material Design（没有明确安装MD），但这些单元对我来说有点混乱。我知道大多数元素的大小和位置都在4dp或8dp网格上，但我不确定它将如何转换为CSS单元。我知道使用rems / ems通常是scalablity的好习惯，但在Material Designed中没有提到它们（至少在尺寸/位置方面）。
例如，可以说<button>标签有8'dp'填充;我希望按钮可以扩展到不同的设备，我希望尽可能多地重用CSS。
我应该用“px”替换“dp”并使用像素单位，并使用不同的断点来支持不同的设备吗？或者我应该采用不同的方法吗？
答案 0 :(得分：1)
是的，您应该使用像素单位，我们没有原生的CSS单位将传递的值转换为4（或8）倍。
要为不同设备保持相同比例的样式，您可以在HTML <head>内的HTML文件中使用以下标记：
<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部分设置浏览器首次加载页面时的初始缩放级别。