Material Design 是 Google 公司推出的一种新型设计语言，它的风格丰富多样，包含丰富的颜色样式。在进行网站或者应用开发的时候，我们需要根据设计规范来使用 Material Design 风格的颜色，但是不同屏幕的颜色表现形式可能不同，因此需要对颜色进行响应和适配。本文就为大家介绍 Material Design 中的颜色响应和适配方案。
为什么需要颜色响应和适配
在不同的设备上，颜色的表现效果是不同的。比如说，同一个颜色在一个高清晰度的屏幕上可能看起来很鲜艳，但在一个低分辨率屏幕上可能会变得暗淡无光。因此，在使用 Material Design 中的颜色进行开发的时候，需要考虑到不同屏幕的显示效果，使用一些响应式的方案才能保证颜色的一致性。
此外，不同设备的显示细节也不同，比如说在 Retina 屏幕上，一个像素点所占的宽度可能是普通屏幕的两倍。这就意味着，我们需要精确地设置元素的尺寸和颜色，才能够展现理想的效果。
Material Design 中的颜色方案
Material Design 中的主色和辅色非常丰富，在进行前端开发的时候需要合理运用，保证整个网站或者应用的风格一致。
主色
Material Design 中的主色有 14 种，每一种主色都有一个浅色和一个深色的版本，以及一个“primary swatch”的定义。我们可以利用这些主色来构建网站的基本颜色方案。
在 Material Design 风格中，主色通常被应用在应用栏、状态栏、底部导航栏、分割线等地方。
辅色
Material Design 中的辅色有 14 种，每一种都有一个浅色和一个深色的版本，并且在设计规范中还提供了每一种颜色的具体应用场景。比如说，红色（Red）通常被用来表示警告或者错误，绿色（Green）则通常被用来表示操作成功或者合法输入。
在 Material Design 风格中，辅助色通常被用在按钮、字体、图标等各种元素中。
中立色
Material Design 中的中立色不属于主色和辅色，通常被用来填充背景或者作为卡片、文本等元素的背景颜色。中立色有 11 种，包括白色和黑色。此外，中立色还有两种特殊的版本，分别是浅色和深色。
颜色响应性
在不同屏幕的显示效果可能不同的情况下，我们需要对颜色进行响应性的处理，以便在不同设备上都能够保持一致的颜色表现。
媒体查询
使用媒体查询是一种常见的响应性方案，我们可以在 CSS 中定义不同的媒体查询规则，根据不同的屏幕尺寸来设置颜色的值。比如说，对于 1080p 分辨率的屏幕，我们可以使用较浅的颜色，而对于 720p 的屏幕，则可以使用深色的颜色。
-- -------------------- ---- -------
------ ----------- ------ -
-- -
------ --------
-
-
------ ----------- ------ --- ----------- ------- -
-- -
------ --------
-
-
------ ----------- ------- -
-- -
------ --------
-
-REM 和 EM 单位
使用 REM 和 EM 单位也是一种常见的响应性方案，它们的值会根据浏览器的字体大小而变化。我们可以将颜色的定义从像素转换为 REM 或 EM 单位，这样可以保证在不同字体大小的设备上，颜色的视觉表现相同。
-- -------------------- ---- -------
-- -
------ --------
-------- -------
-
------ ----------- ------ -
-- -
------ --------
-
-
------ ----------- ------ --- ----------- ------- -
-- -
------ --------
-
-
------ ----------- ------- -
-- -
------ --------
-
-颜色适配性
除了响应性方案，我们还需要考虑颜色的适配性。不同屏幕的显示细节不同，我们需要对元素的尺寸和颜色进行精确的设置，以保证它们在不同设备上展现理想的效果。
通过 viewport 单位设置元素的大小
在进行网站或者应用开发的时候，引入 viewport 单位是一种不错的选择。viewport 单位是一种相对于屏幕宽度或者高度的单位，在进行元素大小设置的时候非常实用。
div {
width: 50vw;
height: 50vh;
background-color: #1e90ff;
}在这个例子中，我们通过 viewport 单位来设置元素的宽度和高度。它的值为屏幕宽度或者高度的百分之五十，这样不论在什么屏幕上，都能占据屏幕的一半大小。
通过 SVG 设置颜色
SVG 是一种矢量图形格式，不会随着分辨率的变化而变形。我们可以通过 SVG 来设置颜色，从而实现颜色的适配。
<svg width="50" height="50" viewBox="0 0 120 120" fill="#1e90ff"> <text x="50" y="75" font-size="60">SVG</text> </svg>
在这个例子中，我们通过 SVG 来设置了文字的颜色。可以看到，不论在什么屏幕上，文字的颜色都是相同的，这是由于采用了矢量图形的形式，不会受到分辨率的影响。
结论
在进行 Material Design 风格的开发时，我们需要考虑到不同屏幕的颜色表现形式，使用一些响应式的方案才能保证颜色的一致性。此外，不同设备的显示细节也不同，我们需要精确地设置元素的尺寸和颜色，才能够展现理想的效果。
通过本文的讲解，相信读者对 Material Design 中的颜色响应和适配方案有了更清晰的认识和理解。在实际的开发中，希望读者能够灵活运用这些技巧，为用户创造更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672ddb88eedcc8a97c862b40