简介
Material Design 是一种设计语言，由 Google 在 2014 年推出，旨在统一 Google 的产品界面设计，以提供更一致的用户体验。在设计中，媒体查询允许我们根据屏幕大小和屏幕方向，为不同的设备提供定制化的设计。本篇文章将介绍如何在 Material Design 中实现媒体查询。
媒体查询的基础
在使用 Material Design 开发时，我们需要知道 CSS 的基本媒体查询语法。下面是一个媒体查询的基础结构：
@media (max-width: 768px) {
/* CSS code here */
}这个媒体查询表示当屏幕宽度小于或等于 768 像素时，CSS 代码会应用到网页上。类似地，我们可以使用 min-width 和 orientation 属性来制定不同的条件。
在 Material Design 中实现媒体查询
媒体查询是必须的，因为不同屏幕的大小和方向需要不同的设计。在 Material Design 中，我们可以使用 Grid 来实现不同的布局。例如，我们可以创建一个四列网格：
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell">Column 1</div>
<div class="mdc-layout-grid__cell">Column 2</div>
<div class="mdc-layout-grid__cell">Column 3</div>
<div class="mdc-layout-grid__cell">Column 4</div>
</div>
</div>在这里，一共有四列。但是，如果用户在手机上访问网站，这样的布局看起来过于拥挤。因此，我们可以使用媒体查询来在不同的设备上更改网格布局。如下所示：
@media (max-width: 600px) {
.mdc-layout-grid__cell {
width: 50%;
}
}这个代码块表示当屏幕宽度小于或等于 600 像素时，每个网格单元格的宽度将从 25% 更改为 50%。在布局上，我们的网格现在看起来像下面这样：
+------------------+ | Column 1 | Column 2 | +------------------+ | Column 3 | Column 4 | +------------------+
总结
Material Design 是一种优秀的设计语言，提供了丰富的设计组件。媒体查询在 Material Design 中也是必不可少的。我们可以使用 Grid 和媒体查询来为不同设备提供定制化的设计，在不影响用户体验的情况下满足用户的需求。我们希望这篇文章能帮助大家更好地使用 Material Design，实现更好的前端设计效果。
示例代码
-- -------------------- ---- -------
---- ------------------------
---- -------------------------------
---- ------------------------------------ -------
---- ------------------------------------ -------
---- ------------------------------------ -------
---- ------------------------------------ -------
------
------
-------
---------------------- -
------ ----
-
------ ----------- ------ -
---------------------- -
------ ----
-
-
--------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ecce9968c7c53b0d1f21c